17行代码解决微信小程序图片延迟加载

Posted 2020-09-22 SmarTom

js 页面

Page({
  data: {
    realScrollTop: 0,//页面滚动距离
　　 driveHeight　　　//屏幕高度可初始化设置
},
scroll(e){
  if(e.detail.scrollTop > this.data.realScrollTop){
      this.setData({
          realScrollTop: e.detail.scrollTop
      });
  }
 }
});

　　

wxmal页面

<scroll-view scroll-y="true" scroll-top="{{resetScrollTop}}" bindscroll="scroll" >
<image wx:if="{{realScrollTop+driveHeight*2 > (index*70)}}" src="{{item[‘img‘]}}"></image>　　
<image wx:else src="{{item[‘bgm‘]}}"></image>
</scroll-view>