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