1***@qq.com
1***@qq.com
  • 发布:2022-03-16 11:15
  • 更新:2022-03-17 20:31
  • 阅读:443

【报Bug】swiper在字节小程序下闪过白屏

分类:uni-app

产品分类: uniapp/小程序/字节跳动

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 10.13.6 (17G2208)

HBuilderX类型: 正式

HBuilderX版本号: 3.3.11

第三方开发者工具版本号: 3.2.5-2

基础库版本号: 2.45.0.4

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="content">  
        <swiper style="height:200px" :duration="swiperDuration2" :current="swiperCurrent" @change="swiperChange" circular>  
            <swiper-item v-for="(item, index) in swiperList" :key="index">  
                {{ item.index }}  
            </swiper-item>  
        </swiper>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                list: [{  
                    index: 1,  
                    value: 1  
                }, {  
                    index: 2,  
                    value: 2  
                }, {  
                    index: 3,  
                    value: 3  
                }, {  
                    index: 4,  
                    value: 4  
                }, {  
                    index: 5,  
                    value: 5  
                }, {  
                    index: 6,  
                    value: 6  
                }, {  
                    index: 7,  
                    value: 7  
                }],  
                count: 0,  
                // 滑动到的位置  
                swiperIndex: 0,  
                swiperCurrent: 0,  
                swiperDuration2: '0',  
                // 当前swiper渲染的items  
                swiperList: [{  
                    index: 1,  
                    value: 1  
                }, {  
                    index: 2,  
                    value: 2  
                }, null],  
                lastCurrent: 0  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            swiperChange: function(e) {  
                let that = this;  

                let current = e.detail.current;  
                let lastIndex = that.$data.swiperIndex;  
                let currentItem = that.$data.swiperList[current];  
                let info = {  
                    source: e.detail.source  
                };  

                that.$data.lastCurrent = lastIndex;  
                // 是正向衔接  
                let isLoopPositive = current == 0 && lastIndex == 2;  
                if (current - lastIndex == 1 || isLoopPositive) {  
                    // 如果是滑到了左边界或者下一个还未有值,弹回去  
                    if (currentItem == null) {  
                        return;  
                    }  

                    let swiperChangeItem = that.getNextSwiperChangeIndex(current);  
                    that.$data.swiperList[swiperChangeItem] = that.getNextSwiperNeedItem(currentItem, that.$data.list);  
                }  

                // 是反向衔接  
                var isLoopNegative = current == 2 && lastIndex == 0;  
                if (lastIndex - current == 1 || isLoopNegative) {  
                    // 如果滑到了右边界或者上一个还未有值,弹回去  
                    if (currentItem == null) {  
                        return;  
                    }  

                    let swiperChangeItem = that.getLastSwiperChangeIndex(current)  
                    that.$data.swiperList[swiperChangeItem] = that.getLastSwiperNeedItem(currentItem, that.$data.list);  
                }  

                if (currentItem == null) return;  

                // 记录滑过来的位置,此值对于下一次滑动的计算很重要  

                this.$nextTick(function(){  

                    that.$data.swiperIndex = current  
                    that.$data.swiperCurrent = current  
                })  
            },  

            /**  
             * 获取初始化的swiperList  
             */  
            getInitSwiperList: function(list, defaultIndex) {  
                let that = this;  
                let current = defaultIndex % 3;  
                let realIndex = list.findIndex(function(item) {  
                    return item != null && item.index == defaultIndex;  
                });  

                let swiperList = [];  
                let currentItem = list[realIndex];  
                swiperList[current] = currentItem;  
                swiperList[that.getLastSwiperChangeIndex(current)] = that.getLastSwiperNeedItem(currentItem, list);  
                swiperList[that.getNextSwiperChangeIndex(current)] = that.getNextSwiperNeedItem(currentItem, list);  

                console.log("初始化swiperList", swiperList);  
                return swiperList;  
            },  

            /**  
             * 获取swiperList中current上一个的index  
             */  
            getLastSwiperChangeIndex: function(current) {  
                return current > 0 ? current - 1 : 2;  
            },  

            /**  
             * 获取swiperLit中current下一个的index  
             */  
            getNextSwiperChangeIndex: function(current) {  
                return current < 2 ? current + 1 : 0;  
            },  

            /**  
             * 获取上一个要替换的list中的item  
             */  
            getLastSwiperNeedItem: function(currentItem, list) {  
                if (currentItem == null) return null;  
                let listNeedIndex = currentItem.index - 1;  
                let realIndex = list.findIndex(function(item) {  
                    return item != null && item.index == listNeedIndex;  
                });  
                if (realIndex == -1) return null;  
                let item = listNeedIndex == -1 ? null : list[realIndex];  
                return item;  
            },  

            /**  
             * 获取下一个要替换的list中的item  
             */  
            getNextSwiperNeedItem: function(currentItem, list) {  
                if (currentItem == null) return null;  
                let listNeedIndex = currentItem.index + 1;  
                let realIndex = list.findIndex(function(item) {  
                    return item != null && item.index == listNeedIndex;  
                });  
                if (realIndex == -1) return null;  
                let total = this.total != 0 ? this.total : list.length;  
                let item = listNeedIndex == total ? null : list[realIndex];  

                return item;  
            },  
        }  
    }  
</script>  

<style>  
</style>  

操作步骤:

使用抖音19.9版本进行手机预览

预期结果:

current=2滑动至current=0时不白屏

实际结果:

current=2滑动至current=0时白屏0.5s

bug描述:

同一个例子在字节小程序原生编码下无问题
通过hbuilderx下生成小程序存在问题

开发者工具无法测出该问题,需要使用手机预览切抖音版本为19.9

具体问题为swiper按需加载,3个swiper-item循环修改内容,current=0,滑动至current=2时(即最后一个item),再次滑动到current=0时白屏0.5s后正常显示。

2022-03-16 11:15 负责人:无 分享
已邀请:
小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

抖音其他版本这样么?

  • 1***@qq.com (作者)

    只有19.9出现这个问题

    2022-03-17 13:19

小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

是不是抖音19.9有问题,,,但也不对啊,开发工具的代码正常,是不是代码的那个地方出问题了?,你试试uniui创建运行到19.9出问题不

该问题目前已经被锁定, 无法添加新回复