<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>
- 发布:2022-03-16 11:15
- 更新:2022-03-17 20:31
- 阅读:443
产品分类: uniapp/小程序/字节跳动
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 10.13.6 (17G2208)
HBuilderX类型: 正式
HBuilderX版本号: 3.3.11
第三方开发者工具版本号: 3.2.5-2
基础库版本号: 2.45.0.4
项目创建方式: HBuilderX
示例代码:
操作步骤:
使用抖音19.9版本进行手机预览
使用抖音19.9版本进行手机预览
预期结果:
current=2滑动至current=0时不白屏
current=2滑动至current=0时不白屏
实际结果:
current=2滑动至current=0时白屏0.5s
current=2滑动至current=0时白屏0.5s
bug描述:
同一个例子在字节小程序原生编码下无问题
通过hbuilderx下生成小程序存在问题
开发者工具无法测出该问题,需要使用手机预览切抖音版本为19.9
具体问题为swiper按需加载,3个swiper-item循环修改内容,current=0,滑动至current=2时(即最后一个item),再次滑动到current=0时白屏0.5s后正常显示。
1***@qq.com (作者)
只有19.9出现这个问题
2022-03-17 13:19