个人中心 | 微信开放社区

使用分页和空白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[代码][代码]: [代码][代码]50[代码][代码]rpx;[代码][代码] [代码][代码]padding[代码][代码]: [代码][代码]20[代码][代码]rpx;[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]32[代码][代码]rpx;[代码][代码] [代码][代码]color[代码][代码]: [代码][代码]#ff0000[代码][代码];[代码][代码] [代码][代码]border-bottom[代码][代码]: [代码][代码]1[代码][代码]rpx [代码][代码]solid[代码] [代码]#eeeeee[代码][代码];[代码][代码]}[代码] [代码].list-end{[代码][代码] [代码][代码]text-align[代码][代码]: [代码][代码]center[代码][代码];[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]18[代码][代码]rpx;[代码][代码] [代码][代码]color[代码][代码]: [代码][代码]#b2b2b2[代码][代码];[代码][代码] [代码][代码]margin[代码][代码]: [代码][代码]15[代码][代码]rpx [代码][代码]0[代码] [代码]7.5[代码][代码]rpx;[代码][代码] [代码][代码]display[代码][代码]: flex;[代码][代码] [代码][代码]flex-[代码][代码]direction[代码][代码]: row;[代码][代码] [代码][代码]justify-[代码][代码]content[代码][代码]: [代码][代码]center[代码][代码];[代码][代码] [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码]}[代码] [代码].list-end .line {[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]20%[代码][代码];[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]1px[代码][代码];[代码][代码] [代码][代码]background-color[代码][代码]: [代码][代码]#dddddd[代码][代码];[代码][代码] [代码][代码]margin[代码][代码]: [代码][代码]0[代码] [代码]30[代码][代码]rpx;[代码][代码]}[代码] [代码][代码][代码] [代码][代码]<[代码][代码]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}}" >[代码] [代码] [代码] [代码] [代码][代码]<[代码][代码]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[代码][代码]>[代码][代码] [代码][代码][代码][代码] [代码][代码]<[代码][代码]text[代码][代码]>{{page}}--</[代码][代码]text[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]text[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{100}}"[代码] [代码]wx:for-index[代码][代码]=[代码][代码]'i'[代码] [代码]>{{index}}</[代码][代码]text[代码][代码]>[代码] [代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]template[代码][代码]>[代码] demo见代码片段 [代码]https:[代码][代码]//developers.weixin.qq.com/s/ItRHXsmg7L5r[代码]使用小程序开发工具导入片段可直接运行

GitHub账号

选择需要上架的开放服务

案例类型