预览图:
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().windowWidth
const screenHeight = wx.getSystemInfoSync().windowHeight
this.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;
}