在工具上是可以完好显示的打包好之后在安卓手机上是白屏

<template>  
    <view>  
        <tabbar index="0"></tabbar>  
        <view class="header">  
            <view :style="'height:'+statusBarHeight+'px'"></view>  
            <view class="">  
                <view class="left">motors</view>  
                <view class="search">  
                    <u-search height="26" placeholder="看车选车聊车" :clearabled="false" :show-action="false" v-model="keyword"></u-search>  
                </view>  
                <view class="right">  
                    <u-icon name="plus-circle-fill" color="#5B8EDC" size="26"></u-icon>  
                </view>  
            </view>  
            <view class="nav">  
                <u-tabs  
                    :list="navList"  
                    lineWidth="20"  
                    lineHeight="7"  
                    :current="swiperConfig.swiperCur"  
                    :lineColor="`url(${lineBg}) 100% 100%`"  
                    :activeStyle="{  
                        color: '#303133',  
                        fontWeight: 'bold',  
                        transform: 'scale(1.08)'  
                    }"  
                    :inactiveStyle="{  
                        color: '#606266',  
                        transform: 'scale(1)'  
                    }"  
                    itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"  
                    @click="navClick"  
                    >  
                </u-tabs>  
            </view>  
        </view>  
        <view class="content" :style="'margin-top:'+(statusBarHeight+90)+'px'">  
            <swiper class="swiper" :style="{ height: swiperHeight + 'px' }" :indicator-dots="swiperConfig.indicatorDots"  
                :autoplay="swiperConfig.autoplay" :interval="swiperConfig.interval" :duration="swiperConfig.duration"  
                :current="swiperConfig.swiperCur" @change="swiperChange">  
                <swiper-item v-for="(item,index) in navList" :key="index" style="height: 100%;">  
                    <view v-if="index == 0" :id="'content-wrap' + index">  
                        <scroll-view scroll-y style="height: 100%;width: 100%;">  
                            <view class="swiper-item-content">  
                                <!-- 轮播图 -->  
                                <view class="banner">  
                                    <u-swiper  
                                        :list="bannerList"  
                                        previousMargin="5"  
                                        nextMargin="5"  
                                        circular  
                                        :autoplay="true"  
                                        radius="5"  
                                        bgColor="rgba(255, 255, 255, 0.0)"  
                                    ></u-swiper>  
                                </view>  
                                <!-- 一些功能模块 -->  
                                <view class="mokuai">  
                                    <view>  
                                        <view class="tb">  
                                            <image src="/static/buluo.png" mode=""></image>  
                                        </view>  
                                        <view class="font">找部落</view>  
                                    </view>  
                                    <view>  
                                        <view class="tb">  
                                            <image src="/static/moyou.png" mode=""></image>  
                                        </view>  
                                        <view class="font">找摩友</view>  
                                    </view>  
                                    <view>  
                                        <view class="tb">  
                                            <image src="/static/huodong.png" mode=""></image>  
                                        </view>  
                                        <view class="font">找活动</view>  
                                    </view>  
                                    <view>  
                                        <view class="tb">  
                                            <image src="/static/phb.png" mode=""></image>  
                                        </view>  
                                        <view class="font">排行榜</view>  
                                    </view>  
                                </view>  
                                <!-- 部落话题 -->  
                                <view class="huati">  
                                    <scroll-view  scroll-x="true" scroll-left="0">  
                                        <view class="li" v-for="(data,i) in huatiList" :key="i">  
                                            <text class="icon iconfont">&#xe66e;</text>  
                                            {{ data.name }}  
                                        </view>  
                                    </scroll-view>  
                                </view>  
                                <!-- 瀑布流布局 -->  
                                <view class="buju">  
                                    <view class="waterfall-box h-flex-x h-flex-2">  
                                        <view>  
                                            <helang-waterfall   
                                                v-for="(data,i) in leftList"   
                                                :key="i"   
                                                :params="data"   
                                                tag="left"  
                                                :index="i"  
                                                @height="onHeight"  
                                                @click="onClick"  
                                            ></helang-waterfall>  
                                        </view>  
                                        <view>  
                                            <helang-waterfall   
                                                v-for="(data,i) in rightList"   
                                                :key="i"   
                                                :params="data"   
                                                @height="onHeight"  
                                                @click="onClick"  
                                                tag="right"  
                                                :index="i"  
                                            ></helang-waterfall>  
                                        </view>  
                                    </view>  
                                    <view class="load-txt">{{ajax.loadTxt}}</view>  
                                </view>  
                            </view>  
                        </scroll-view>  
                    </view>  
                    <view v-else-if="(index == 1)" :id="'content-wrap' + index">  
                        <scroll-view scroll-y style="height: 100%;width: 100%;">  
                            <!-- 关注 -->  
                            <view class="swiper-item-content">  
                                {{ item.name }}  
                            </view>  
                        </scroll-view>  
                    </view>  
                    <view v-else :id="'content-wrap' + index">  
                        <scroll-view scroll-y style="height: 100%;width: 100%;">  
                            <view class="swiper-item-content">  
                                {{ item.name }}  
                            </view>  
                        </scroll-view>  
                    </view>  
                </swiper-item>  

            </swiper>  
        </view>  
        <!-- <view class="banner">  
            <u-swiper  
                :list="bannerList"  
                previousMargin="5"  
                nextMargin="5"  
                circular  
                :autoplay="true"  
                radius="5"  
                bgColor="rgba(255, 255, 255, 0.0)"  
            ></u-swiper>  

        </view> -->  
    </view>  
</template>  

<script>  
    import helangWaterfall from "@/components/helang-waterfall/helang-waterfall"  
    export default {  
        components: {  
            "helang-waterfall": helangWaterfall  
        },  
        data() {  
            return {  
                statusBarHeight:0,//状态栏高度  
                keyword: '宝马S1000RR',  
                lineBg:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAOCAYAAABdC15GAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFxSURBVHgBzZNRTsJAEIb/WTW+lpiY+FZPIDew3ABP4GJ8hxsI9zBpOYHeQDwBPQI+mRiRvpLojtPdYhCorQqF/6GdbGd2vvwzBXZcNAt4oj1ANeUoAT5iqkUjbEFLHNmhD1YPEvpZ3ghkGlVDCkc94/BmHMq998I5ONiY1ZBfpKAyuOtgAc5yOEDmYEWNh32BHF91sGHZHmwW4azciN9aQwnz3SJEgOmte+R2tdLprTYoa50mvuomlLpD4Y3oQZnov6D2RzCqI93bWOHaEmAGqQUyRBlZR1WfarcD/EJ2z8DtzDGvsMCwpm8XOCfDUsVOCYhiqRxI/CTQo4UOvjzO7Pow18vfywneuUHHUUxLn55lLw5JFpZ8bEUcY8oXdOLWiHLTxvoGpLqoUmy6dBT15o/ox3znpoycAmxUsiJTbs1cmxeVKp+0zmFIS7bGWiVghC7Vwse8jFKAX9eljh4ggKLLv7uaQvG9/F59Oo2SouxPu7OTCxN/s8wAAAAASUVORK5CYII=",  
                navList: [{  
                    name: '推荐',  
                    badge: {  
                        isDot: true  
                    }  
                },  
                {  
                    name: '关注'  
                },{  
                    name: '赛事',  
                }, {  
                    name: '视频'  
                }, {  
                    name: '改装'  
                }, {  
                    name: '装备'  
                }, {  
                    name: '技巧'  
                }, {  
                    name: '摩旅'  
                }],  
                //滑块的高度(单位px)  
                swiperHeight: 0,  
                //左右滑动轮播配置  
                swiperConfig: {  
                    indicatorDots: false,  
                    autoplay: false,  
                    interval: 2000,  
                    duration: 500,  
                    swiperCur: 0  
                },  
                bannerList: [  
                    '/static/images/banner1.png',  
                    '/static/images/banner2.png'  
                ],  
                //推荐话题  
                huatiList:[  
                    {id:1,name:'最美女骑'},  
                    {id:2,name:'今天你骑了吗'},  
                    {id:3,name:'517'},  
                    {id:4,name:'跑山乐趣'},  
                    {id:5,name:'解禁摩'},  
                ],  
                //数据内容  
                dataList:[  
                    {  
                        "id": 3553,  
                        "title": "宝马 R100 改装欣赏",  
                        "cover": "http://img.52moto.net/article/20220413160002625683026eb53.jpeg",  
                        "uid": 536,  
                        "pv": "6.2k",  
                        "author": {  
                            "id": 536,  
                            "name": "帅霖",  
                            "face": "http://img1.52moto.net/author/author16067302545fc4c20e2c593.jpg"  
                        }  
                    },  
                    {  
                        "id": 3552,  
                        "title": "HONDA TIGER 改装欣赏",  
                        "cover": "http://img.52moto.net/article/20220413144002625670425bd07.jpeg",  
                        "uid": 481,  
                        "pv": "4.7k",  
                        "author": {  
                            "id": 481,  
                            "name": "摩无止境1号",  
                            "face": "http://img1.52moto.net/author/author16067301945fc4c1d22d64e.jpg"  
                        }  
                    },  
                    {  
                        "id": 3550,  
                        "title": "哈雷 883 改装 Cafe Racer",  
                        "cover": "http://img.52moto.net/article/2022041312200162564f71d0366.jpeg",  
                        "uid": 16,  
                        "pv": "1.6w",  
                        "author": {  
                            "id": 16,  
                            "name": "游游就是我",  
                            "face": "http://img1.52moto.net/author/author16067292555fc4be27edcaf.jpg"  
                        }  
                    },  
                    {  
                        "id": 3549,  
                        "title": "1973年Aermacchi哈雷 350SX 卧式单缸摩托改装",  
                        "cover": "http://img.52moto.net/article/2022041310200262563352605f3.jpeg",  
                        "uid": 379,  
                        "pv": "6.6k",  
                        "author": {  
                            "id": 379,  
                            "name": "追梦HONDA冬冬",  
                            "face": "http://img1.52moto.net/author/author16067300975fc4c171063ac.jpg"  
                        }  
                    },  
                    {  
                        "id": 3548,  
                        "title": "看外国人怎么改黄龙BJ600！？",  
                        "cover": "http://img.52moto.net/article/2022041309200362562543967de.jpeg",  
                        "uid": 203,  
                        "pv": "3w",  
                        "author": {  
                            "id": 203,  
                            "name": "从小骑油箱",  
                            "face": "http://img1.52moto.net/author/author16067298695fc4c08d7a5cc.jpg"  
                        }  
                    },  
                    {  
                        "id": 3547,  
                        "title": "简约而不简单的BMW四缸Cafè Racer 改装",  
                        "cover": "http://img.52moto.net/article/2022041218000262554da242b70.jpeg",  
                        "uid": 276,  
                        "pv": "5.1k",  
                        "author": {  
                            "id": 276,  
                            "name": "布衣小漫",  
                            "face": "http://img1.52moto.net/author/author16067299485fc4c0dcd788c.jpg"  
                        }  
                    },  
                    {  
                        "id": 3546,  
                        "title": "来品尝一杯日式咖啡|CB1100复古战车东京车展特写",  
                        "cover": "http://img.52moto.net/article/2022041214400262551ec277425.jpeg",  
                        "uid": 80,  
                        "pv": "1.1w",  
                        "author": {  
                            "id": 80,  
                            "name": "奔波儿灞0",  
                            "face": "http://img1.52moto.net/author/author16067297775fc4c03135a5b.jpg"  
                        }  
                    },  
                    {  
                        "id": 3545,  
                        "title": "铃木 GN400 复古改装欣赏",  
                        "cover": "http://img.52moto.net/article/202204121200026254f942719ac.jpeg",  
                        "uid": 267,  
                        "pv": "1.9w",  
                        "author": {  
                            "id": 267,  
                            "name": "大熊猫不会压弯的",  
                            "face": "http://img1.52moto.net/author/author16067299445fc4c0d8a5faa.jpg"  
                        }  
                    }  
                ],  
                leftHeight: 0,  
                rightHeight: 0,  
                leftList: [],  
                rightList: [],  
                ajax: {  
                    // 是否可以加载  
                    load: true,  
                    // 加载中提示文字  
                    loadTxt: '',  
                    // 每页的请求条件  
                    rows:10,  
                    // 页码  
                    page:1,  
                }  
            };  
        },  
        onReady() {  
            //打包在手机上才能使用到plus  
            //this.statusBarHeight = plus.navigator.getStatusbarHeight();//状态栏高度  
            //请求数据  
            this.getList();  
        },  
        onLoad() {  

        },  
        // 触底触发  
        onReachBottom() {  
            this.getList();  
        },  
        // 下拉刷新  
        onPullDownRefresh(){  
            // 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感  
            setTimeout(()=>{  
                this.ajax.page = 1;  
                this.leftHeight = 0;  
                this.rightHeight = 0;  
                this.ajax.load = true;  
                this.getList();  
            },800);  
        },  
        methods:{  
            //手动点击  
            navClick(item) {  
                console.log('item', item);  
                this.swiperConfig.swiperCur = item.index;  
                //动态设置swiper的高度，使用nextTick延时设置  
                this.$nextTick(() => {  
                    this.setSwiperHeight();  
                });  
            },  
            //切换  
            swiperChange(e) {  
                console.log("swiper >>", e)  
                this.swiperConfig.swiperCur = e.target.current;  
                //动态设置swiper的高度，使用nextTick延时设置  
                this.$nextTick(() => {  
                    this.setSwiperHeight();  
                });  
            },  
            //动态设置swiper的高度  
            setSwiperHeight() {  
              let element = "#content-wrap" + this.swiperConfig.swiperCur;  
              let query = uni.createSelectorQuery().in(this);  
              query.select(element).boundingClientRect();  
              query.exec((res) => {  
                  console.log('a'+res);  
                if (res && res[0]) {  
                  this.swiperHeight = res[0].height;  
                }  
              });  
            },  
            // 瀑布流布局start 监听高度变化  
            onHeight(height, tag) {  
                console.log('高度:'+height);  
                if (tag == 'left') {  
                    this.leftHeight += height;  
                } else {  
                    this.rightHeight += height;  
                }  
            },  
            // 组件点击事件  
            onClick(index, tag){  
                console.log(index, tag);  
                // 对应的数据  
                if(tag == 'left'){  
                    console.log(this.leftList[index]);  
                }else{  
                    console.log(this.rightList[index]);  
                }  
                let direction = {  
                    "left":'左',  
                    "right":'右'  
                }  
                /*uni.showToast({  
                    title:`${direction[tag]}侧列表第${index+1}个被点击`,  
                    icon:'none'  
                })*/  
                wx.navigateTo({  
                  url: '/pages/article/article',  
                  events: {  
                    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据  
                    acceptDataFromOpenedPage: function(data) {  
                      console.log(data)  
                    },  
                    someEvent: function(data) {  
                      console.log(data)  
                    }  
                  },  
                  success: function(res) {  
                    // 通过eventChannel向被打开页面传送数据  
                    //res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })  
                  }  
                })  
            },  
            // 获取数据  
            getList() {  
                /*   
                    无真实数据，当前由 setTimeout 模拟异步请求、  
                    自行替换 请求方法将数据 传入 addList() 方法中  
                    自行解决数据格式，自行修改组件内布局和内容绑定  
                */  
                if (!this.ajax.load) {  
                    return;  
                }  
                this.ajax.load = false;  
                this.ajax.loadTxt = '加载中';  

                setTimeout(() => {  

                    this.addList(this.dataList);  
                }, 1000);  

            },  
            addList(res) {  
                // 获取到的数据，请注意数据结构  
                console.log(res);  

                if(!res || res.length < 1){  
                    this.ajax.loadTxt = '没有更多了';  
                    return;  
                }  

                // 左右列表高度的差  
                let differ = this.leftHeight - this.rightHeight;  
                // 计算差值，用于确定优先插入那一边  
                let differVal = 0;  

                // 初始化左右列表的数据  
                let i = differ > 0 ? 1 : 0;  

                let [left, right] = [  
                    [],  
                    []  
                ];  

                // 获取插入的方向  
                let getDirection = (index)=>{  
                    /* 左侧高度大于右侧超过 600px 时，则前3条数据都插入到右边 */  
                    if(differ>= 600 && index < 3){  
                        differVal = 1;  
                        return 'right';  
                    }  

                    /* 右侧高度大于左侧超过 600px 时，则前3条数据都插入到左边 */  
                    if(differ <= -600 && index < 3){  
                        differVal = -1;  
                        return 'left';  
                    }  

                    /* 左侧高度大于右侧超过 350px 时，则前2条数据都插入到右边 */  
                    if(differ >= 350 && index < 2){  
                        return 'right';  
                    }  
                    /* 右侧高度大于左侧超过 350px 时，则前2条数据都插入到左边 */  
                    if(differ <= -350 && index < 2){  
                        differVal = -1;  
                        return 'left';  
                    }  

                    /* 当前数据序号为偶数时，则插入到左边 */  
                    if ((i+differVal) % 2 == 0) {  
                        return 'left';  
                    } else {  
                        /* 当前数据序号为奇数时，则插入到右边 */  
                        return 'right';  
                    }  
                }  

                // 将数据源分为左右两个列表，容错差值请自行根据项目中的数据情况调节  
                res.forEach((item, index) => {  
                    if(getDirection(index) == 'left'){  
                        //console.log(`差值：${differ},方向：left，序号${index}`)  
                        left.push(item);  
                    }else{  
                        //console.log(`差值：${differ},方向：right，序号${index}`)  
                        right.push(item);  
                    }  
                    i++;  
                });  

                // 将左右列表的数据插入，第一页时则覆盖  
                if(this.ajax.page == 1){  
                    this.leftList = left;  
                    this.rightList = right;  
                    uni.stopPullDownRefresh();  
                }else{  
                    this.leftList = [...this.leftList, ...left];  
                    this.rightList = [...this.rightList, ...right];  
                }  

                this.ajax.load = true;  
                this.ajax.loadTxt = '上拉加载更多';  
                this.ajax.page++;  

                //动态设置swiper的高度，使用nextTick延时设置  
                this.$nextTick(() => {  
                    this.setSwiperHeight();  
                })  
            },  
            // end  
        }  
    }  
</script>  

<style lang="scss">  
    @import "index.css";  
</style>