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


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

    话不多说,先上代码

    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 

  • 相关阅读:
    数据分析(3)-matplotlib基础
    zabbix部署-版本3.2.6
    mysql5.6.35源码安装记录
    mysql数据库主从操作记录
    zabbix+docker
    爬与反爬
    爬虫基础 之(一) --- 初识爬虫
    android p 解锁 忽然亮屏后 恢复亮度
    ddr
    ipi
  • 原文地址:https://www.cnblogs.com/zzppff/p/10309926.html
Copyright © 2020-2023  润新知