小程序懒加载技术解析

最新推荐文章于 2024-07-31 17:09:37 发布

原创最新推荐文章于 2024-07-31 17:09:37 发布 · 393 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序懒加载

微信小程序专栏收录该内容

4 篇文章

订阅专栏

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>

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