微信小程序 DOM 问题

DOM 渲染问题

问题

Dom limit exceeded, please check if there's any mistake you've made.

测试页面 1

<template><scroll-view @scroll="screen" style="width: 100%;height: 100vh;" :scroll-y="true" :scroll-with-animation="true"@scrolltolower="scrolltolower"><view v-for="(v,i) in list" :key="i" :id="'page'+i" :style="{height:v.height ? v.height+'px':'auto'}"><block v-if="v&&v.length>0" ><view style="width: 100%;height: 160rpx;background-color: aqua;color: red;margin-top: 20rpx;" v-for="d in v":key="d">{{d}}</view></block></view></scroll-view>
</template><script>export default {data() {return {list: [],list2: [],page: 1}},onLoad() {this.loadData()},methods: {screen(e){this.index = this.index ? this.index : 0;this.windowHeight = this.windowHeight ? this.windowHeight : wx.getSystemInfoSync().windowHeight;this.boundings.forEach((item, index) => {if ((item.top < e.detail.scrollTop + this.windowHeight) && (e.detail.scrollTop + this.windowHeight <= item.bottom)) {this.index = index;}})this.list.forEach((item, index) => {if ((index == this.index || index == this.index - 1 || index == this.index - 2 || index == this.index + 1 || index == this.index + 2) &&this.list[index] && !Array.isArray(this.list[index])) {this.list[index] = this.list2[index]}if ((index > this.index + 2 || index < this.index - 2) && Array.isArray(this.list[index])) { this.list[index] = { height: this.boundings[index].height }}}) },scrolltolower() { this.page += 1wx.showLoading()setTimeout(() => {this.loadData()}, 500)},loadData() {let data1 = [];for (let i = 0; i < 10; i++) {data1.push(1 + i + (this.page - 1) * 10)}if (this.page == 1) {this.list = [];this.list2 = [];}this.list[this.page - 1] = data1;this.list2[this.page - 1] = data1;this.$nextTick(() => { setTimeout(()=>{this.boundings = Array.isArray(this.boundings) ? this.boundings : [];let index = this.page - 1;// wx.createSelectorQuery().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()const query = uni.createSelectorQuery().in(this);query.select(`#page${index}`).boundingClientRect(rect => {// console.log(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();},300)})wx.hideLoading()},},}
</script><style>.list-item {height: 200rpx;background: #ddd;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #fff;}
</style>

滑动过快触发多次到底事件

			loadData() {this.isPdFalse2 = this.isPdFalse2 ? this.isPdFalse2 : false;if(this.isPdFalse2) return true;this.isPdFalse2 = true;let data1 = [];for (let i = 0; i < 10; i++) {data1.push(1 + i + (this.page - 1) * 10)}if (this.page == 1) {this.list = [];this.list2 = [];}this.list[this.page - 1] = data1;this.list2[this.page - 1] = data1;this.$nextTick(() => { setTimeout(()=>{this.boundings = Array.isArray(this.boundings) ? this.boundings : [];let index = this.page - 1;wx.createSelectorQuery().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()this.isPdFalse2 = false;},300)})// 数据获取不成功时// this.isPdFalse2 = false;wx.hideLoading()}

测试页面 2

<template><scroll-view @scroll="screen" style="width: 100%;height: 100vh;" :scroll-y="true" :scroll-with-animation="true"@scrolltolower="scrolltolower"><view v-for="(v,i) in list" :key="i" :id="'listpage-'+i"><block v-if="i - currentPage >= -1 && i - currentPage <= 1"><view style="width: 100%;height: 160rpx;background-color: aqua;color: red;margin-top: 20rpx;"v-for="d in v" :key="d">{{d.name}}</view></block></view></scroll-view>
</template><script>export default {data() {return {currentPage: 0,pageSize: 10,list: [],pageFrame: [],inPageUpdate: false}},onLoad: function() {this.scrolltolower()},methods: {screen(e) {if (this.inPageUpdate) {return;}var {scrollTop} = e.detail;// console.log(this.currentPage)if (this.currentPage > 0) {var pageFrame = this.pageFrame[this.currentPage - 1];// console.log(pageFrame,1)var screenHeight = wx.getSystemInfoSync().screenHeight;// console.log(screenHeight,1)if ((scrollTop + screenHeight) - (pageFrame.lastBottom + pageFrame.height) < -200) {this.inPageUpdate = true;this.currentPage -= 1;this.inPageUpdate = false;}}var currentPageFrame = this.pageFrame[this.currentPage];// console.log(currentPageFrame,2)if (currentPageFrame) {if (scrollTop - (currentPageFrame.lastBottom + currentPageFrame.height) > 200) {this.inPageUpdate = true;this.currentPage += 1;this.inPageUpdate = false;}}},scrolltolower() {if (this.inPageUpdate) {return;}var list = [];for (var i = 0; i < 100; i++) {list.push({name: '999999999----' + i});}this.list = [...this.list, list]this.inPageUpdate = true;if (this.currentPage < this.list.length - 1) {var self = this;var currentPage = this.currentPage;self.$nextTick(() => {const query1 = uni.createSelectorQuery().in(this);query1.select('#listpage-' + this.currentPage).boundingClientRect(function(rect) {console.log(rect, 1)if (currentPage > 0) {rect.lastBottom = self.pageFrame[currentPage - 1].height + self.pageFrame[currentPage - 1].lastBottom} else {rect.lastBottom = 0;}self.pageFrame[`${currentPage}`] = rect}).exec();this.currentPage = this.currentPage + 1;var nextPage = this.list[this.currentPage];var key = `${this.currentPage}`this.list[key] = nextPage;this.inPageUpdate = false;})} else {this.inPageUpdate = false;}}}}
</script><style></style>