微信小程序虚拟列表的实现示例

目录
  • 前言
  • 分析
  • 初始渲染方法
  • 初步优化
  • 进一步优化
  • 方法二

前言

大部分小程序都会有这样的需求,页面有长列表,需要下拉到底时请求后台数据,一直渲染数据,当数据列表长时,会发现明显的卡顿,页面白屏闪顿现象。

分析

  • 请求后台数据,需要不断的setData,不断的合并数据,导致后期数据渲染过大
  • 渲染的DOM 结构多,每次渲染都会进行dom比较,相关的diff算法比较耗时都大
  • DOM数目多,占用的内存大,造成页面卡顿白屏

初始渲染方法

/*
 * @Descripttion:
 * @version:
 * @Author: shijuwang
 * @Date: 2021-07-14 16:40:22
 * @LastEditors: shijuwang
 * @LastEditTime: 2021-07-14 17:10:13
 */
//Page Object
Page({
  data: {
    list: [],          // 所有数据
  },
  //options(Object)
  onLoad: function (options) {
    this.index = 0
    const arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },

    ]
    this.setData({ list: arr })
  },

  onReachBottom: function () {
    const arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },

    ]
    let { list } = this.data
    this.setData({
      list: [...list, ...arr]
    })
  },

});

// wxml
<view class="container">
    <view class="item-list" wx:for="{{list}}">
      <text class="">
          {{item.idx}}
      </text>
    </view>
</view>

每次触底重新请求数据,合并数组并重新setData,列表负责时,会出现卡顿白屏,每次setData的数据越来越大,增加了通讯时间,也渲染了过多的dom元素,如下图:

初步优化

1.将一维数组改为二位数组

  • 通常情况下,setData是进行了全部的数据重新渲染
  • 分页请求,对服务器压力相对较小,分页增量渲染对setData压力也小
  • setData对二维数组查找对应索引的那条数据的下标,用 setData 进行局部刷新
  • setData的时候,只是将当前这一屏幕的数据赋值
// wxml
<view class="container">
  <block wx:for="{{list}}" wx:for-index="pageNuma">
    <view class="item-list" wx:for="{{item}}">
      <text class="">{{item.idx}}</text>
    </view>
  </block>
</view>
// wx.js
Page({
  data: {
    list: [],          // 所有数据
  },
  //options(Object)
  onLoad: function (options) {
    this.index = 0;
    this.currentIndex = 0;          // 当前页数 pageNuma
    const arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },

    ]
    this.setData({ [`list[${this.currentIndex}]`]: arr })
  },

  onReachBottom: function () {
    this.currentIndex++;            // 触底+1
    const arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },

    ]
    this.setData({
      [`list[${this.currentIndex}]`]: arr
    })
  },
});

这样我们就可以看到,整个渲染是以屏为分页来渲染,请求几个pageNum,那么就渲染几屏,没屏里再进行没个列表渲染。

进一步优化

2我们可以只渲染可视区域的一屏、或者渲染可视区域附近的几屏,其他区域用view占位,不进行具体渲染,从而减少dom渲染,减少节点过多造成的问题。

做这一步的话需要拆分以下几步:

  • 获取当前屏幕高度、渲染时获取每屏高度、滚动距离计算
  • 存储获取到的全部渲染数据、存储每屏高度、通过onPageScroll计算可视区域处于那一屏
  • 除了可视区域其他区域数据为空,用view占位
    is.currentIndex = 0;           // 当前页数 pageNum
    this.pageHeight = [];            // 每屏高度存储
    this.allList = [];               // 获取到的所有数据
    this.systemHeight = 0;           // 屏幕高度
    this.visualIndex = [];           // 存储可视区域pageNum

进入页面时,挂载相关数据:

 // wxml
 <view wx:for="{{list}}" wx:for-index="pageNum" id="item{{pageNum}}">
    <view class="item-list" wx:for="{{item}}">
      <text class="">{{item.idx}}</text>
    </view>
  </view>
 onLoad: function (options) {
    this.index = 0;
    this.currentIndex = 0;           // 当前页数 pageNum
    this.pageHeight = [];            // 每屏高度存储
    this.allList = [];               // 获取到的所有数据
    this.systemHeight = 0;           // 屏幕高度
    const arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      }
    ]
    this.setData({ [`list[${this.currentIndex}]`]: arr }, () => {

      this.setPageHeight();
    });
    this.getSystemInfo();
  },

给每一屏的view动态的设置id名字,方便在渲染时获取每屏高度,并进行存储,为后续不在可视区域占位设置高度使用
循环pageHeight,相加每个分页高度和当前滚动距离进行比较,获取到当前渲染的pageNum,然后把当前选渲染的pageNum -+1,上一屏幕和下一屏幕放入数组中,当前三个分页数据展示,其他屏幕的数据进行view占位,高度为存储高度。

   // 滚动距离计算
  onPageScroll: throttle(function (e) {
    let pageScrollTop = e[0].scrollTop;
    let that = this;
    // 滚动计算现在处于那一个分页的屏
    let scrollTop = 0;
    let currentIndex = this.currentIndex;

    for (var i = 0; i < this.pageHeight.length; i++) {
      scrollTop = scrollTop + this.pageHeight[i];

      if (scrollTop > pageScrollTop + this.systemHeight - 50) {
        this.currentIndex = i;
        this.visualIndex = [i - 1, i, i + 1];
        that.setData({
          visualIndex: this.visualIndex
        })
        break;
      }
    }
  },200)

实时监控滚动,做节流优化处理

const throttle = (fn, interval) => {
  var enterTime = 0; //触发的时间
  var gapTime = interval || 300; //间隔时间,如果interval不传值,默认为300ms
  return function () {
    var that = this;
    var backTime = new Date(); //第一次函数return即触发的时间
    if (backTime - enterTime > gapTime) {
      fn.call(that, arguments);
      enterTime = backTime; //赋值给第一次触发的时间 保存第二次触发时间
    }
  };
}

获取到可视区域数组,然后判断当前pageNum是否在visualIndex里,是的话进行渲染,不是的话,view占位,高度获取存储高度

<wxs module='filter'>
 var includesList = function(list,currentIndex){
   if(list){
    return list.indexOf(currentIndex) > -1
   }
 }
 module.exports.includesList =  includesList;
</wxs>
<view class="container">
 <view wx:for="{{list}}" wx:for-index="pageNum" id="item{{pageNum}}" wx:key="pageNum">
   <block wx:if="{{filter.includesList(visualIndex,pageNum)}}">
     <view class="item-list" wx:for="{{item}}">
       <text class="">{{item.idx}}</text>
     </view>
   </block>
   <block wx:else>
     <view class="item-visible" style="height:{{pageHeight[pageNum]}}px"></view>
   </block>
 </view>
</view>

在可视区域的数组的pageNum 则循环当前数组,如果不在的话就设置高度占位,渲染效果如下:

这种方法就大功告成了!

方法二

使用微信小程序api
IntersectionObserver

  //视图监听
  observePage: function (pageNum) {
    const that = this;
    const observerView = wx.createIntersectionObserver(this).relativeToViewport({ top: 0, bottom: 0});
    observerView.observe(`#item${pageNum}`, (res) => {
      console.log(res,'res');
      if (res.intersectionRatio > 0) {
        that.setData({
          visualIndex: [pageNum - 1, pageNum, pageNum + 1]
        })

      }
    })
  }

利用oberserve监听当前页面是否在在可视区域内,是的话将当前pageNum -+1,pageNum放入可视区域数组visualIndex中,在wxs进行判断可视区域数组是否存在当前pageNum,是的话渲染,不存在的话用view占位。

方案一  滚动计算  >>>代码片段:(滚动虚拟列表

方案二  IntersectionObserver  api >>> 代码片段:intersectionObserver

到此这篇关于微信小程序虚拟列表的实现示例的文章就介绍到这了,更多相关小程序虚拟列表内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序 scroll-view组件实现列表页实例代码

    scroll-view组件介绍 scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载下拉刷新列表页!下面就以<摇出微笑>为例来讲解一下这个组件的使用吧! 为app导入新page页面 首先需要为我们的小程序导入新的page页面,项目根目录打开app.json这个项目配置文件在里面的pages数组添加"pages/allJoke/allJoke"然后设置底部导航在"tabBar"的列表项("lis

  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

  • 微信小程序 列表的上拉加载和下拉刷新的实现

    微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧. 不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据

  • 微信小程序点击列表跳转到对应详情页过程解析

    这篇文章主要介绍了微信小程序点击列表跳转到对应详情页过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 点击列表跳转到对应详情页: 用自定义属性data-index保存当前点击列表的index,在点击跳转的方法中获取index并且拼接到要跳转的路径后面: 跳转到详情页,在onLoad钩子中通过参数options获取传过来的index,渲染对应的数据 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 小程序实现列表点赞功能

    最近在开发一个小程序,想添加一个点赞功能,那到底怎么实现呢?因为要和后台服务器同步数据,所以这个我想了好几天应该怎么实现点赞和取消点赞的逻辑,经过两天的实践调试,最终实现了. 思路如下: 1.找到对应文章列表的id (我用的是 wx:for 列表渲染 加 template 模板来实现文章列表的,所以如果没找到对应的 id ,点赞时可能会出现点击一个列表,别的列表也会发生变化的事件) 2.在前端利用 wx.setStorageSync 保存对应的列表点赞的 id 的缓存 后面通过缓存判断该文章是否

  • 微信小程序 实现列表刷新的实例详解

    微信小程序 列表刷新: 微信小程序,最近自己学习微信小程序的知识,就想实现现在APP 那种列表刷新,下拉刷新,上拉加载等功能. 先开看一下界面 1.wx.request (获取远程服务器的数据,可以理解成$.ajax) 2. scroll-view的两个事件 2.1 bindscrolltolower(滑到页面底部时) 2.2 bindscroll (页面滑动时) 2.3 bindscrolltoupper (滑倒页面顶部时) 然后我们看代码,详细描述. index.js var url = "

  • 微信小程序实现城市列表选择

    本文实例为大家分享了小程序实现城市列表选择的具体代码,供大家参考,具体内容如下 实现效果预览   实现功能简介 城市的选择 按中文/拼音/首字母条件搜索 按首字字母快速定位到城市位置 目录结构 主要代码 app.js App({ globalData: { trainBeginCity: '杭州', trainEndCity: '北京' } }) app.json { "pages":[ "pages/index/index", "pages/citys/

  • 微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图 从左边的列表页调到右边的详情页 二.页面之间的跳转 首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi

  • 微信小程序实现给循环列表添加点击样式实例

    微信小程序实现给循环列表添加点击样式实例 微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: <view class="taga"> <view class="tag-title">标签</view> <view class="tag-box"> <vie

  • 微信小程序虚拟列表的实现示例

    目录 前言 分析 初始渲染方法 初步优化 进一步优化 方法二 前言 大部分小程序都会有这样的需求,页面有长列表,需要下拉到底时请求后台数据,一直渲染数据,当数据列表长时,会发现明显的卡顿,页面白屏闪顿现象. 分析 请求后台数据,需要不断的setData,不断的合并数据,导致后期数据渲染过大 渲染的DOM 结构多,每次渲染都会进行dom比较,相关的diff算法比较耗时都大 DOM数目多,占用的内存大,造成页面卡顿白屏 初始渲染方法 /* * @Descripttion: * @version: *

  • 微信小程序虚拟列表的应用实例

    目录 前言 什么是虚拟列表? demo效果 准备工作 屏高&盒子高度 优化 总结 前言 股票热门榜单有4000多条,渲染到页面上在盘中时还得实时更新,如果采用接口和分页,当下拉几十页的时候页面会变的越来越卡并且还得实时更新,最后的做法是一开始数据就从ws传递过来,我们只需要传起始下标和结束下标即可,在页面上我们也只生成几个标签.大大减轻了渲染压力. 什么是虚拟列表? 就只指渲染可视区域内的标签,在滚动的时候不断切换起始和结束的下标来更新视图,同时计算偏移. demo效果 准备工作 计算一屏可展示

  • 微信小程序实现列表滚动头部吸顶的示例代码

    本文介绍了小程序头部吸顶的实现代码示例,分享给大家,也给自己留个笔记 demo 地址: https://github.com/iotjin/Jh_weapp 效果图: 吸顶主要是 position: sticky; .header { background: rgb(230, 230, 230); height: 25px; line-height: 25px; padding-left: 30rpx; font-size: 13px; align-items: center; position

  • 微信小程序实现鼠标拖动效果示例

    本文实例讲述了微信小程序实现鼠标拖动效果.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{left}}px;top:{{top}}px;" bindtouchmove="viewTouchMove" >使用鼠标拖动我</view> index.js文件 Page({ data:{ left:'', top:'' },

  • 微信小程序wxml列表渲染原理解析

    这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 列表渲染存在的意义 以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. <view> <block wx:for="{{products}}" wx:for-item="item" wx:key="index"> <view>{{

  • 微信小程序多列表渲染数据开关互不影响的实现

    最近在学习小程序,正好发现一个问题,微信小程序多列表渲染数据开关怎么互不影响,记录一下,分享给大家 <!--pages/list/list.wxml--> <wxs src="../../utils/filter.wxs" module="filter" /> <view class="list"> <view wx:for="{{list}}" wx:key="{{inde

  • 微信小程序 实现列表项滑动显示删除按钮的功能

    微信小程序 实现列表项滑动显示删除按钮的功能 微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.

  • 微信小程序form表单组件示例代码

    表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交. 当点击<form/>表单中 formType 为 submit 的<button/>组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key. 属性名 类型 说明 report-submit Boolean 是否返回fo

  • 微信小程序实现列表的横向滑动方式

    微信小程序原生方式实现列表的横向滑动的两种方法: 效果图: 方式一:简单样式实现 父元素设置: white-space:nowrap;//不换行 overflow-x: auto;子元素设置: display:inline-block; 方式二:scroll-view 标签 + 样式 scroll-view的横向滚动: scroll-view的内层view元素需要:display:inline-block; scroll-view的外层元素需要:white-space:nowrap; 实现代码:

  • 微信小程序文章列表功能完整实例

    本文实例讲述了微信小程序文章列表功能.分享给大家供大家参考,具体如下: 没有服务器接口数据的情况下玩一玩. list.wxml <view> <swiper class='swiper' indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay="true" interval="2000" easing-function="

随机推荐