微信小程序 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 += 1
				wx.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>