uni-app 图片懒加载

功能

实现图片懒加载，并且显示数组中，始终只有3张图片，上下滑动增加的同时，删除最开始的那一张。可以指定从总图片的第几张开始加载。

思路

要实现上下滑动时的动画效果，我这里用到是uni-app自带swiper组件。同时为了解决增加或删除数组时，会重新渲染，导致动画效果未完成，所以用的是animationfinish页面加载后触发的事件。

要实现上下滑动时，动画执行完毕之后，要把执行后的那张图片，始终保持在中间位置。此处，就用到了serper组件中的current，当滑倒第3或者第1张时，给current赋值，使显示的图片始终在第二张的位置。同时滑动添加的同时，也要删除掉最开始的那一张

步骤

swiper组件使用

<swiper vertical="true":current="atPresentNode.swiperIndex"@animationfinish="slideSwiper"><swiper-item v-for="item,index in swiperItems":key="index"><view>{{item}}</view></swiper-item></swiper>

初始化显示页面

当总图片数组索引位为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 + 1

setTimeout是为了保证删除时，数组是已经添加进去了的

this.atPresentNode.swiperIndex = 1 保证滑动后的图片始终在中间位置

this.swiperItems.push(this.items[this.atPresentNode.itemsIndex + 1])
setTimeout(() => {this.atPresentNode.swiperIndex = 1this.swiperItems.shift()
}, 0)

上滑时

判断滑动之后是否在第一张的位置，并且总索引位大于0

this.atPresentNode.swiperIndex <= 0 && this.atPresentNode.itemsIndex > 0

**此处先删除后添加是由于先在头部添加时，会改变显示图片相对于数组的位置，显示图片的位置就向下延后了一位。所以为了避免这种情况，故而先删除，再添加到头部 **

 this.swiperItems.pop()          setTimeout(() => {this.atPresentNode.swiperIndex = 1this.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 : 0index = +index ? +index - 1 : 0this.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.swiperIndexif ((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 = 1this.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 = 1this.swiperItems.unshift(this.items[this.atPresentNode.itemsIndex - 1])}, 0)}}}}