uni-app图片懒加载功能实现图片懒加载，显示数组中始终只有3张图片，上下滑动增加时删除第一张。您可以指定从全部图片中的哪几张开始加载。思路是实现上下滑动时的动画效果。我这里使用的是uni-app自带的swiper组件。同时为了解决数组的增删问题，会重新渲染，导致动画效果不完整，所以使用了animationfinish页面加载完成后触发的事件。上下滑动时，动画执行后，执行后的图片要一直保持在中间位置。在这里，使用了serper组件中的电流。当第三张或第一张图片滑动时，给current赋值，让显示的图片一直在第二张的位置。同时，在滑动添加的同时，也删除了第一步swiper组件使用{{item}}当总图片数组的索引位为0时初始化显示页面,然后导航到第一张图片。当总图像数组的索引位>0时，定位第二张图像letswiperIndex=index?1:0//seriperIndex(显示数组索引位)itemsIndex=index?index-1:0//itemsIndex(totalimagearrayindexbit),-1是数组从0开始letminLength=Math.min(2,this.items.length-index)//防止总索引位被大于数组总长度移动页面1.通过swiper判断是向上滑动还是向下滑动组件current可以得到当前页面索引值减去滑动前的页面索引值。大于0则向下滑动，小于0则向上滑动。让currentNum=event.target.current-this.atPresentNode.swiperIndex2。向下滑动时，判断当前页面的图片是中间那张，当数组总长度大于页面索引值+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=1this.swiperItems.shift()},0)判断滑动时向上滑动之后，是否在第一页的位置，并且总索引位大于0this.atPresentNode.swiperIndex<=0&&this.atPresentNode.itemsIndex>0这里先删除再添加，因为当在头部添加first，会改变显示图片相对数组的位置，显示图片的位置延迟一位。所以为了避免这种情况，先把它删掉，然后再把它加到头部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}让swiperIndex=index？1:0索引=+索引？+index-1:0this.atPresentNode={swiperIndex,itemsIndex:index,}letminLength=Math.min(2,this.items.length-index)for(leti=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){letcurrentNum=event.target.current-this.atPresentNode.swiperIndexif((this.items.length<=this.atPresentNode.itemsIndex+1||this.atPresentNode.itemsIndex==0)&¤tNum==0){uni.showToast({标题:'Thereisnomoredata',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){这个.atPresentNode.swiperIndex--//为了与当前同步，所以这里需要--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)}}}}
