http://www.cnblogs.com/zishang91/p/8507485.html（copy
第一种
<!-- 正常商品列表 -->
<view class='goods-list flexw'>
<block wx:key="list" wx:for="{{list}}">
<view class='list-item bgcfff'>
<view class='item-pic flexca' bindtap='detailInto' data-item='{{item}}'>
<image lazy-load="true" mode='widthFix' data-index='{{index}}' class="w" src="{{imgArr[index]?item.preview:'../../../../image/home/page_zw_4.png'}}" />
</view>
</view>
</block>
</view>
js
onLoad: function(opt) {
let that = this;
let screenW = 0;
let screenH=0;
itemChe.name = opt.chesearch;
wx.getSystemInfo({
success(res) {
screenW = res.windowWidth;
screenH = res.windowHeight;
}
})
that.setData({
screenW,
screenH
})
},
getRect:function(){
let that=this;
const query = wx.createSelectorQuery().in(this)
query.select('.list-item').boundingClientRect(function (res) {
console.log(res.height)
that.setData({ itemHeight: res.height});
that.init(res.height);
}).exec()
},
init: function (itemHeight){
let imgArr = this.data.imgArr;
let arrHeight = this.data.arrHeight;
let index = parseFloat(this.data.screenH/itemHeight);
// 先展示屏幕为滚动时的展示图片，这里是两列，所以*2
for(let i=0;i<index*2;i++){
imgArr[i]=true;
}
// 5为高度是的间距,94为初始距离顶部的距离
for (let i = 0; i < imgArr.length; i++) {
arrHeight[i] = Math.floor(i / 2) * (itemHeight+5)+94
}
console.log(imgArr)
console.log(arrHeight)
this.setData({ imgArr, arrHeight })
},
onPageScroll: function (e) {
console.log(e);
let arrHeight = this.data.arrHeight;
let imgArr = this.data.imgArr;
let screenH = this.data.screenH;
if (!this.data.imgshownext){
return;
}
for (let i = 0; i < arrHeight.length; i++) {
// 方案一
// 这里暂时效果不是很好，所以可以把距离改改
// if (arrHeight[i]<e.scrollTop+screenH ){
// imgArr[i]=true;
// }
// 方案二
// 距离稍微早一点释放，距离底部100就释放
// 效果依然不好
if (arrHeight[i]<e.scrollTop+screenH+100){
imgArr[i]=true;
}
}
console.log(imgArr)
this.setData({
imgArr,
imgshownext:false
})
setTimeout(()=>{
this.setData({
imgshownext: true
})
},500)
},
第二种
<!-- scroll商品列表 -->
<scroll-view class='goods-list goods-list-scor' scroll-y="true" wx:if="{{false}}">
<view class='w flexw'>
<block wx:key="list" wx:for="{{list}}">
<view class='list-item bgcfff'>
<view class='item-pic flexca' bindtap='detailInto' data-item='{{item}}'>
<image lazy-load="true" bindload="loadlistnew" mode='widthFix' data-index='{{index}}' class="w" src="{{item.preview}}" />
</view>
</view>
</block>
</view>
</scroll-view>