预览图：

wxml代码：

<block  wx:for="{{img}}" wx:key="index"><view class="pic-list"><!-- //listIndex大于item.index时，图片显示 --><image src="{{ listIndex > index ? item : '' }}" class="pic {{listIndex > index ?'Action':''}}" mode="widthFix" /></view></block>

js:

//index.js
//获取应用实例
const app = getApp()
Page({data: {img: ['http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg', 'http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg', 'http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg','http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg', 'http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg', 'http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg','http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg', 'http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg', 'http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg'],},onShow: function () {//获取屏幕尺寸const screenWidth = wx.getSystemInfoSync().windowWidthconst screenHeight = wx.getSystemInfoSync().windowHeightthis.setData({//获取页面初始状态图片数量，0.63为图片容器的高度值(63vw)，将代码中0.63改为你的容器对应高度listIndex: screenHeight / (screenWidth * 0.49),screenWidth: screenWidth,screenHeight: screenHeight})},// 滚动事件 onPageScroll(e) { //滚动距离+屏幕高度换算vw倍数let listIndex = (e.scrollTop + this.data.screenHeight) / (this.data.screenWidth * 0.49)if (listIndex > this.data.listIndex) { // 防止向上滑动后再向下滑再次出现重新加载情况this.setData({listIndex: listIndex})}}})

wxss:

.pic-list {width: 100vw;background: #efeff4;margin: 3vw 0;}.pic {width: 100%;display: block;opacity: 0;transition: opacity 0.3s linear 0.3s;}.Action {opacity: 1;}