uni-app|uni-app 图片懒加载
uni-app 图片懒加载
功能
实现图片懒加载，并且显示数组中，始终只有3张图片，上下滑动增加的同时，删除最开始的那一张。可以指定从总图片的第几张开始加载。
思路
要实现上下滑动时的动画效果，我这里用到是uni-app自带swiper组件。同时为了解决增加或删除数组时，会重新渲染，导致动画效果未完成，所以用的是animationfinish页面加载后触发的事件。
【uni-app|uni-app 图片懒加载】要实现上下滑动时，动画执行完毕之后，要把执行后的那张图片，始终保持在中间位置。此处，就用到了serper组件中的current，当滑倒第3或者第1张时，给current赋值，使显示的图片始终在第二张的位置。同时滑动添加的同时，也要删除掉最开始的那一张
步骤
swiper组件使用
{{item}} 初始化显示页面 当总图片数组索引位为0时，则定位到第一张图片。当总图片数组索引位>0时，则定位到第二张图片
let swiperIndex = index ? 1 : 0//seriperIndex(显示数组索引位)
itemsIndex = index ? index - 1 : 0 // itemsIndex(总图片数组索引位),-1是数组从0开始
let minLength = Math.min(2, this.items.length - index) // 防止总索引位大于总的数组长
移动页面 1.判断上滑还是下滑 通过swiper组件current，可以得到当前页面索引值，减去未滑动前的页面索引值。大于0则是向下滑动，小于0则是向上滑动。
let currentNum = event.target.current - this.atPresentNode.swiperIndex
2.下滑时 判断当前页面图片是中间的那一张,并且总数组长度大于页面索引值+1时，加载第四张图片。
this.atPresentNode.swiperIndex >= 2 && this.items.length > this.atPresentNode.itemsIndex + 1setTimeout是为了保证删除时，数组是已经添加进去了的
this.atPresentNode.swiperIndex = 1 保证滑动后的图片始终在中间位置
this.swiperItems.push(this.items[this.atPresentNode.itemsIndex + 1])
setTimeout(() => {
this.atPresentNode.swiperIndex = 1
this.swiperItems.shift()
}, 0)
上滑时 判断滑动之后是否在第一张的位置，并且 总索引位大于0
this.atPresentNode.swiperIndex <= 0 && this.atPresentNode.itemsIndex > 0
此处先删除后添加是由于先在头部添加时，会改变显示图片相对于数组的位置，显示图片的位置就向下延后了一位。所以为了避免这种情况，故而先删除，再添加到头部
this.swiperItems.pop()
setTimeout(() => {
this.atPresentNode.swiperIndex = 1
this.swiperItems.unshift(this.items[this.atPresentNode.itemsIndex - 1])
}, 0)
完整代码
data () {
return {
index: 0, //从总数组第几位开始
items: [], //总数组
swiperItems: [], //显示数组
atPresentNode: {
swiperIndex: 0, // 显示数组索引位
itemsIndex: 0, // 总数组索引位
},
}
},
created () {
this.initSwiperItems(this.index)
},
methods: {
initSwiperItems (index) {
this.swiperItems = []
if (this.items.length <= 0) { return }
let swiperIndex = index ? 1 : 0
index = +index ? +index - 1 : 0
this.atPresentNode = {
swiperIndex,
itemsIndex: index,
}
let minLength = Math.min(2, this.items.length - index)
for (let i = 0;
i <= minLength;
i++) {
this.items[index + i] && this.swiperItems.push(this.items[index + i])
}
this.atPresentNode.swiperIndex == 1 && (this.atPresentNode.itemsIndex = this.atPresentNode.itemsIndex + 1) // 当从第二张显示时，总数组索引位也加一
},
slideSwiper (event) {
let currentNum = event.target.current - this.atPresentNode.swiperIndex
if ((this.items.length <= this.atPresentNode.itemsIndex + 1 || this.atPresentNode.itemsIndex == 0) && currentNum == 0) {
uni.showToast({ title: '已经没有更多的数据了', icon: 'none' })
return
}
if (currentNum > 0) {
this.atPresentNode.swiperIndex++//为了和current同步，所以此处需要++
this.atPresentNode.itemsIndex++
if (this.atPresentNode.swiperIndex >= 2 && this.items.length > this.atPresentNode.itemsIndex + 1) {
this.swiperItems.push(this.items[this.atPresentNode.itemsIndex + 1])
setTimeout(() => {
this.atPresentNode.swiperIndex = 1
this.swiperItems.shift()
}, 0)
}
}
if (currentNum < 0) {
this.atPresentNode.swiperIndex--//为了和current同步，所以此处需要--
this.atPresentNode.itemsIndex--
if (this.atPresentNode.swiperIndex <= 0 && this.atPresentNode.itemsIndex > 0) {
this.swiperItems.pop()
setTimeout(() => {
this.atPresentNode.swiperIndex = 1
this.swiperItems.unshift(this.items[this.atPresentNode.itemsIndex - 1])
}, 0)
}
}
}
}
