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>
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;
}
wxjs
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
})
}
此文转载,原作者博客:https://blog.csdn.net/perfly_z/article/details/86611461