博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

Posted on 2017-06-11 00:55  SmarTom  阅读(6612)  评论(0编辑  收藏  举报

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>