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;
const query = uni.createSelectorQuery().in(this);
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();
},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)
})
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;
if (this.currentPage > 0) {
var pageFrame = this.pageFrame[this.currentPage - 1];
var screenHeight = wx.getSystemInfoSync().screenHeight;
if ((scrollTop + screenHeight) - (pageFrame.lastBottom + pageFrame.height) < -200) {
this.inPageUpdate = true;
this.currentPage -= 1;
this.inPageUpdate = false;
}
}
var currentPageFrame = this.pageFrame[this.currentPage];
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>