无需考虑数据结构,效果如图
话不多说,先上代码
1.wxml
<view class="content"> <block wx:key="{{img}}" wx:for="{{img}}"> <view class="pic-list"> //listIndex大于item.index时,图片显示 <image src="{{ listIndex > index ? item : '' }}" class="pic {{listIndex > index ?'Action':''}}" mode="widthFix" /> </view> </block> </view>
2.wxss
page { background: #fff; } .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; }
Action添加一个简单的渐显动画
3.js
onShow: function () { //获取屏幕尺寸 const screenWidth = wx.getSystemInfoSync().windowWidth const screenHeight = wx.getSystemInfoSync().windowHeight this.setData({ //获取页面初始状态图片数量,0.63为图片容器的高度值(63vw),将代码中0.63改为你的容器对应高度 listIndex: screenHeight / (screenWidth * 0.63), screenWidth: screenWidth, screenHeight: screenHeight }) }, // 滚动事件 onPageScroll(e) { //滚动距离+屏幕高度换算vw倍数 let listIndex = (e.scrollTop + this.data.screenHeight) / (this.data.screenWidth * 0.63) this.setData({ listIndex: listIndex }) }
原理:通过onPageScroll() 方法返回的e.scrollTop值与手机窗口宽高进行计算,较完美的解决了等高或均高图片序列的图片懒加载。
关于图片高度:图片+容器宽高必须为vw取值,自适应的请用图片宽高比计算高度的vw值,替换js代码中的0.63
作者:zzppff
Github链接:https://github.com/zzppff/zzppff-miniprogram
原创方法,商业转载请联系作者获得授权,非商业转载请注明出处。
---------------------
原文:https://blog.csdn.net/perfly_z/article/details/86611461