公告列表
公告列表
收藏
评论

使用分页和空白view支撑解决Dom limit exceeded 问题

列表页数据量过大页面渲染节点过多会触发Dom limit exceeded .

解决方案如下。

欢迎讨论交流


// index.js
 
Page({
  data: {
    currentPage: 0,
    pageFrame:[]
  },
  pageSize: 10,
  currentPage:0,

  onLoad: function () {

     //mock 一些数据

      var list = [];
      for (var i = 0; i< 10000 ; i++) {
        list.push({
          name: 'ssss----' + i,
          desc: 'aaaaa----' + i,
          content: 'adasdadasdadadasdadadadadasdadad ----' + i
        });

      }

     //数据分页

      this.pagedList = this.pageList(list);
      this.setData({
        listLength: list.length,
        list: [this.pagedList[0]]
      })

  },

 //滚动监听

  onListScroll(e) {
    if (this.inPageUpdate) {
      return;
    }
    var { scrollTop } = e.detail;
    if (this.currentPage > 0) {
      var pageFrame = this.data.pageFrame[this.currentPage - 1];
      var screenHeight = wx.getSystemInfoSync().screenHeight;
      if ((scrollTop + screenHeight) - (pageFrame.lastBottom + pageFrame.height) < -200) {
        this.inPageUpdate = true;
        this.currentPage -= 1;
        this.setData({
          currentPage: this.currentPage,
        }, () => {
          this.inPageUpdate = false;
        })
      }
    }
    var currentPageFrame = this.data.pageFrame[this.currentPage];
    if (currentPageFrame) {
      if (scrollTop - (currentPageFrame.lastBottom + currentPageFrame.height) > 200) {
        this.inPageUpdate = true;
        this.currentPage += 1;
        this.setData({
          currentPage: this.currentPage,
        }, () => {
          this.inPageUpdate = false;
        })
      }
    }

  },

 //计算分页高度

  reachPageBottom() {
    if (this.inPageUpdate) {
      return;
    }
    this.inPageUpdate = true;
    if (this.currentPage < this.pagedList.length - 1) {
      var self = this;
      var currentPage = this.currentPage;
      wx.createSelectorQuery().select('#listpage-' + this.currentPage).boundingClientRect(function (rect) {
        if (currentPage > 0) {
          rect.lastBottom = self.data.pageFrame[currentPage - 1].height + self.data.pageFrame[currentPage - 1].lastBottom
        } else {
          rect.lastBottom = 0;
        }
        self.setData({
          [`pageFrame[${currentPage}]`]: rect
        })
      }).exec();
 
      this.currentPage = this.currentPage + 1;
      var nextPage = this.pagedList[this.currentPage];
      var key = `list[${this.currentPage}]`
      var data = {};
      data[key] = nextPage;
      data.currentPage = this.currentPage;
      console.log(data);
      this.setData(data, () => {
        this.inPageUpdate = false;
      });
    } else {
      this.setData({
        pageEnd: true,
      }, () => {
        this.inPageUpdate = false;
      })
    }
 
  },

  listItemTap(e) {

   //响应点击事件


    console.log(e.currentTarget.dataset);

  },

 //分页函数

  pageList(list) {
    var splitArray = (arr, len) => {
      var a_len = arr.length;
      var result = [];
      for (var i = 0; i < a_len; i += len) {
        result.push(arr.slice(i, i + len));
      }
      return result;
    }
    var pagedList = splitArray(list, this.pageSize);
    return pagedList;
  }
 
})
 


/*index.wxss*/
page {
  height: 100%;
}
 
.list {
  height: 100%;
  width: 100%;
}
 
.listitem {
  line-height: 50rpx;
  padding: 20rpx;
  font-size: 32rpx;
  color: #ff0000;
  border-bottom: 1rpx solid #eeeeee;
}
 
.list-end{
    text-align: center;
    font-size: 18rpx;
    color: #b2b2b2;
    margin: 15rpx 0 7.5rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
 
.list-end .line {
  width: 20%;
  height: 1px;
  background-color: #dddddd;
  margin: 0 30rpx;
}


<!-- index.wxml -->

  <scroll-view class="list" style='' scroll-y="true" bindscrolltolower="reachPageBottom" bindscrolltoupper="reachPageTop" bindscroll="onListScroll"  enable-back-to-top="true" upper-threshold='100' lower-threshold="100" scroll-top="{{scrollTo}}">

   <!-- 循环分页 -->

    <view wx:for="{{list}}" wx:for-item="subList" wx:for-index="page" id="listpage-{{page}}" wx:key="listpage"  >


     <!-- 判断页面状态 -->

      <block wx:if="{{page - currentPage >= -1 && page - currentPage <= 1}}" >

       <!-- item渲染 -->

        <template is="listitem" wx:for="{{subList}}" data="{{item:item, page,index}}" />
      </block>
      <view wx:else style='height:{{pageFrame[page].height}}px;' ></view>
    </view>
    <view class="list-end" wx:if="{{listLength > 0}}">
        <view class='line'></view>
         
        <text wx:if="{{pageEnd}}">以上共{{listLength || 0}}个数据</text>
        <button wx:else loading="true"
        disabled="true" bindtap="empty" class="button-noborder" style='font-size: 26rpx; background-color:transparent' >正在加载更多...</button>
        <view class='line'></view>
    </view>
  </scroll-view>
 
  <template name="listitem">
  <view class='listitem' bindtap='listItemTap' data-item='{{item}}' >
      <view>{{item.name}}</view>
      <view>{{item.desc}}</view>
      <view>{{item.content}}</view>
      <!-- 循环100个节点 -->
      <text>{{page}}--</text>
      <text wx:for="{{100}}" wx:for-index='i' >{{index}}</text>
 
  </view>
  </template>




demo见代码片段


https://developers.weixin.qq.com/s/ItRHXsmg7L5r

使用小程序开发工具导入片段可直接运行

最后一次编辑于  2019-01-16
收藏

2 个评论

  • 小肥羊🍊
    小肥羊🍊
    2020-08-12

    可以，先mark

    2020-08-12
    赞同
    回复
  • 木头光光
    木头光光
    2019-01-22

    怎么下拉回看加载过的数据，有延迟显示？

    2019-01-22
    赞同
    回复 3
    • 佳佳
      佳佳
      2019-07-04

      回看数据延迟显示问题怎么解决的啊？

      2019-07-04
      赞
      回复
    • Jinker🔅
      Jinker🔅
      2019-09-06
      [文章] 如何用小程序实现类原生APP下一条无限刷体验​ https://developers.weixin.qq.com/community/develop/article/doc/0000645ae8cf882129c8b471951c13
      2019-09-06
      赞 1
      回复
    • 涵雨轩
      涵雨轩
      2022-07-01
      有解决这个问题吗？
      2022-07-01
      赞
      回复
请 登录 后发表内容