小程序长列表优化，解决数据过多白屏问题

叁歲伎倆 2023-07-18 09:50 19阅读 0赞

# 小程序长列表优化，解决数据过多白屏问题 #

场景： 使用mpvue框架，列表数据量过大  
解决方法-分页渲染数据，列表滚动时将可视区域外元素数据清空只保留高度  
先贴代码，有注释

## html ##

<template>
      
      <div class="list-box">
        <div
          :id="'page'+pindex"
          class="list-page"
          :style="{height:pitem.height ? pitem.height+'px':'auto'}"
          v-for="(pitem,pindex) in list"
          :key="pindex"
        >
          <section v-if="pitem.length > 0">
            <div class="list-item" v-for="(item,index) in pitem" :key="index">{
       {item}}</div>
          </section>
        </div>
      </div>
    </template>

## js ##

<script>
    export default {
      data() {
        return {
          list: [],
          page: 1,
          pageNumber: 10,
          allData: []
        };
      },
      methods: {
        loadData() {
          // 先为dom渲染数据，才能在下面的dom数据获取中拿到dom数据
          let data = [];
          let oldDt = JSON.parse(JSON.stringify(this.list));
          for (let i = 0; i < this.pageNumber; i++) {
            data.push(1 + i + (this.page - 1) * this.pageNumber);
          }
          if (this.page == 1) {
            this.list = [];
          }
          this.allData.push(data);
          oldDt[this.page - 1] = data; //缓存数据，优化性能时使用
          this.list = oldDt;
    
          //计算并记录数据的边界值
          this.boundings = Array.isArray(this.boundings) ? this.boundings : [];
          let index = this.page - 1;
          // 通过延迟的方式去获取dom数据
          setTimeout(() => {
            const query = wx.createSelectorQuery();
            query
              .select(`#page${index}`)
              .boundingClientRect(rect => {
                this.boundings[index] = {
                  height: rect.height, //高度
                  top:
                    index == 0
                      ? rect.top
                      : this.boundings[index - 1].top +
                        this.boundings[index - 1].height, //上边界
                  bottom:
                    index == 0
                      ? rect.bottom
                      : this.boundings[index - 1].bottom + rect.height //下边界
                };
              })
              .exec();
            wx.stopPullDownRefresh();
            wx.hideLoading();
          }, 1000);
        }
      },
      onReady() {
        this.loadData();
      },
      onUnload() {},
      onPageScroll(e) {
        //当前与滚动区域底部相交的元素索引
        this.index = this.index ? this.index : 0;
        this.windowHeight = this.windowHeight
          ? this.windowHeight
          : wx.getSystemInfoSync().windowHeight;
        this.boundings.forEach((item, index) => {
          // 如果没有在屏幕中，并且视野的高度小于我的结尾位置距离顶部的距离，也就是说，这个dom是我正在查看的dom
          if (
            item.top < e.scrollTop + this.windowHeight &&
            e.scrollTop + this.windowHeight <= item.bottom
          ) {
            this.index = index;
          }
        });
    
        //当前相交元素的前2后2元素显示，超出部分隐藏
        let oldarr = JSON.parse(JSON.stringify(this.list));
        oldarr.forEach((item, index) => {
          // 这里的意思是渲染了三页的数据，并且list这一页有数据，并且数据是obj
          if (
            (index == this.index ||
              index == this.index - 1 ||
              index == this.index - 2 ||
              index == this.index + 1 ||
              index == this.index + 2) &&
            oldarr[index] &&
            !Array.isArray(oldarr[index])
          ) {
            // 是的话就替换成我们的数组数据
            oldarr[index] = this.allData[index];
          }
          // 这里是指当前索引页不是显示区域数据判断，并且数据类型是数组
          if (
            (index > this.index + 2 || index < this.index - 2) &&
            Array.isArray(oldarr[index])
          ) {
            // 是的话就替换成我们的dom高度数据
            oldarr[index] = { height: this.boundings[index].height };
          }
        });
        this.list = oldarr;
      },
      onPullDownRefresh() {
        this.page = 1;
        setTimeout(() => {
          this.loadData();
        }, 1000);
      },
      onReachBottom() {
        this.page = ++this.page;
        wx.showLoading();
        setTimeout(() => {
          this.loadData();
        }, 1000);
      }
    };
    </script>

## less ##

<style lang="less" scoped>
    .list-item {
      height: 200rpx;
      background: #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #fff;
    }
    </style>

有详细备注就不多说了。自己看代码啦。代码参考[这位大佬的小程序原生代码，点击可跳转，大佬有小程序代码片段][Link 1]

[Link 1]: https://blog.csdn.net/qq_32616119/article/details/102636247

发表评论取消回复

表情：

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

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

相关阅读

相关 Android应用App启动白屏（黑屏）问题解决

Android应用App启动白屏（黑屏）问题解决点击Android手机桌面的应用App icon图标后，Android启动这个应用，正常情况下会立即看到并进入到开发者自

小咪咪/ 2023年10月17日 23:16/ 0 赞/ 69 阅读

相关解决android splash 启动白屏问题

有时我们会发现 ,在splash 页面启动之前会有那么零点几秒的白屏, 真的很让人抓狂解决办法其实也很简单 . 1.在style.xml中定义一个样式, 这里引入 sp

矫情吗；*/ 2023年10月10日 08:03/ 0 赞/ 48 阅读

相关小程序长列表优化，解决数据过多白屏问题

小程序长列表优化，解决数据过多白屏问题场景：使用mpvue框架，列表数据量过大解决方法-分页渲染数据，列表滚动时将可视区域外元素数据清空只保留高度先贴代码

叁歲伎倆/ 2023年07月18日 09:50/ 0 赞/ 20 阅读

相关 centos rm 提示参数列表过长解决方法

find . -name "2\" | xargs rm -rf ![20191216172439167.jpg][] "2\"可根据需要自己编写，这个是删除当前目录所有2

素颜马尾好姑娘i/ 2023年06月22日 13:53/ 0 赞/ 52 阅读

相关 Vue 大量数据展示卡顿解决方案（长列表优化）

需求分析（长列表展示）页面某处需要渲染 1w+ 条数据，并需要滚动展示，这时如果直接把这些数据渲染到页面上，会导致系统内存大量被占用，导致页面卡顿或崩溃我们都知道，

素颜马尾好姑娘i/ 2023年01月20日 15:53/ 0 赞/ 872 阅读

相关 uni-app小程序页面传值数据过长问题

在通过url进行页面传值时，传递数据过长（如：base64图片数据）或数据包含特殊字符（如：?），这样传递的数据会不完整，而报错。遇到这样的情况可以转成编码格式传递

旧城等待，/ 2022年11月19日 05:28/ 0 赞/ 109 阅读

相关解决启动Android应用程序时出现白屏或者黑屏的问题

一般情况下，启动页面通常是全屏的，而且会用一张图片来展示用户打开应用程序后第一眼看到的界面。在手机中点击应用程序的图标到应用程序显示完MainActivity的视图这个过程中，

ゝ一纸荒年。/ 2022年11月16日 01:39/ 0 赞/ 565 阅读

相关前端性能优化-白屏时间(白屏经历了什么&白屏优化方案&CSS性能优化&内联关键CSS)

文章目录一、白屏时间二、白屏时间的重要性三、白屏的过程四、白屏-性能优化 1. DNS解析优化 2. TCP网络

古城微笑少年丶/ 2022年11月14日 10:29/ 0 赞/ 279 阅读

相关 java小程序之可变长参数列表

可以把类型相同但个数可变的参数传递给方法。参数声明方式： typeName…parameterName( 类型名 … 参数名 ) 示例代码如下： //可

r囧r小猫/ 2022年07月28日 00:26/ 0 赞/ 191 阅读

相关 ionic解决启动白屏问题

ionic解决启动白屏问题参考资料： [cordova启动页面和图标的设置][cordova] [ionic2常见问题-启动后白屏问题][ionic2_-

布满荆棘的人生/ 2022年05月26日 10:15/ 0 赞/ 772 阅读