小程序懒加载技术解析

你的名字 2024-04-18 09:13 94阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，94人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序上拉数据加载（懒加载）：onReachBottom详解

考[https://segmentfault.com/a/1190000017028080][https_segmentfault.com_a_1190000017028...

逃离我推掉我的手/ 2024年04月19日 09:06/ 0 赞/ 110 阅读

相关小程序懒加载技术解析

wxml <view class="content"> <block wx:key="{ {img}}" wx:for="{ {img}}"> ...

你的名字/ 2024年04月18日 09:13/ 0 赞/ 95 阅读

相关小程序懒加载

预览图： ![在这里插入图片描述][132e52b58810474cbe9a9734d2a96f44.gif_pic_center] wxml代码： <bloc

我就是我/ 2023年10月01日 15:34/ 0 赞/ 52 阅读

相关懒加载(Lazy Loading) - MyBatis懒加载 - Spring懒加载

文章目录懒加载(Lazy Loading) MyBatis中懒加载的使用 Spring中懒加载的使用懒加载(

Dear 丶/ 2022年12月10日 15:53/ 0 赞/ 479 阅读

相关 Hibernate懒加载解析

在Hibernate框架中，当我们要访问的数据量过大时，明显用缓存不太合适，因为内存容量有限，为了减少并发量，减少系统资源的消耗，这时Hibernate用懒加载机制来弥补这

古城微笑少年丶/ 2022年08月25日 08:36/ 0 赞/ 279 阅读

相关懒加载

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

快来打我*/ 2022年05月28日 05:35/ 0 赞/ 468 阅读

相关小程序之『图片懒加载』终极解决方案

微信小程序中，懒加载特效让人头疼不已，因为小程序完全没法操作dom，所以位置的操作在小程序中，变得极其的难~~ 先看特效： ![465490074ca467b67086.g

水深无声/ 2022年05月23日 13:50/ 0 赞/ 546 阅读

相关微信小程序image懒加载问题汇总

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

梦里梦外;/ 2022年04月02日 16:14/ 0 赞/ 727 阅读

相关小程序入坑记：懒加载

小程序可以说是非常火热了，开发周期短，页面简洁，数据控制方便，可以说结合了三大框架的特点小程序的目录结构：页面以index为例 utils：工具类目录，供全局调用

我就是我/ 2022年03月12日 08:56/ 0 赞/ 343 阅读

相关懒加载

懒加载 <template> <view> <scroll-view :scroll-into-view="'ss' + curr

亦凉/ 2021年07月25日 12:19/ 0 赞/ 842 阅读