当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 小程序图片懒加载较完美解决方案

小程序图片懒加载较完美解决方案

2019年01月24日  | 移动技术网IT编程  | 我要评论

无需考虑数据结构，效果如图

 

 

话不多说，先上代码

 

1.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>

 

2.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;
}

action添加一个简单的渐显动画

 

3.js

 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
    })
  }

 

原理：通过onpagescroll() 方法返回的e.scrolltop值与手机窗口宽高进行计算，较完美的解决了等高或均高图片序列的图片懒加载。

关于图片高度：图片+容器宽高必须为vw取值，自适应的请用图片宽高比计算高度的vw值，替换js代码中的0.63

 

作者：zzppff
github链接：https://github.com/zzppff/zzppff-miniprogram
原创方法，商业转载请联系作者获得授权，非商业转载请注明出处。
---------------------

原文：https://blog.csdn.net/perfly_z/article/details/86611461 

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网