当前位置: 首页 > news >正文

微信小程序 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>

相关文章:

微信小程序 DOM 问题

DOM 渲染问题 问题 Dom limit exceeded, please check if theres any mistake youve made.测试页面 1 <template><scroll-view scroll"screen" style"width: 100%;height: 100vh;" :scroll-y"true" :scroll-with-animation"tru…...

可视化作品集(03):旅游景区的应用,美爆啦。

景区可视化通常指的是利用现代科技手段&#xff0c;如地图、虚拟现实&#xff08;VR&#xff09;、增强现实&#xff08;AR&#xff09;、无人机航拍等技术&#xff0c;将景区的地理信息、景点分布、交通路线、游客服务设施等内容以可视化的方式呈现给游客或者管理者&#xff0…...

嵌入式实时操作系统:Intewell操作系统与VxWorks操作系统有啥区别

Intewell操作系统和VxWorks操作系统都是工业领域常用的操作系统&#xff0c;它们各有特点和优势。以下是它们之间的一些主要区别&#xff1a; 架构差异&#xff1a; Intewell操作系统采用微内核架构&#xff0c;这使得它具有高实时性、高安全性和强扩展性的特点。微内核架构…...

PCDN技术如何提高内容分发效率?(壹)

PCDN技术提高内容分发效率的操作主要体现在以下几个方面&#xff1a; 利用P2P技术&#xff1a;PCDN以P2P技术为基础&#xff0c;通过挖掘利用边缘网络的海量碎片化闲置资源&#xff0c;实现内容的分发。这种方式可以有效减轻中心服务器的压力&#xff0c;降低内容传输的延迟&a…...

Java 中Json中既有对象又有数组的参数 如何转化成对象

1.示例一&#xff1a;解析一个既包含对象又包含数组的JSON字符串&#xff0c;并将其转换为Java对象 在Java中处理JSON数据&#xff0c;尤其是当JSON结构中既包含对象又包含数组时&#xff0c;常用的库有org.json、Gson和Jackson。这里我将以Gson为例来展示如何解析一个既包含对…...

什么是数据挖掘(python)

文章目录 1.什么是数据挖掘2.为什么要做数据挖掘&#xff1f;3数据挖掘有什么用处&#xff1f;3.1分类问题3.2聚类问题3.3回归问题3.4关联问题 4.数据挖掘怎么做?4.1业务理解&#xff08;Business Understanding&#xff09;4.2数据理解&#xff08;Data Understanding&#x…...

【Tomcat】Linux下安装帆软(fineReport)服务器 Tomcat

需求&#xff1a;帆软&#xff08;fineReport&#xff09;数据集上传至服务器 工具&#xff1a;XSHELL XFTP 帮助文档 一. 安装帆软服务器Tomcat 提供 Linux X86 和 Linux ARM 两种类型的部署包 &#xff0c;所以在下载部署钱需要确认系统架构不支持在 32 位操作系统上安装 查…...

C++ | Leetcode C++题解之第213题打家劫舍II

题目&#xff1a; 题解&#xff1a; class Solution { public:int robRange(vector<int>& nums, int start, int end) {int first nums[start], second max(nums[start], nums[start 1]);for (int i start 2; i < end; i) {int temp second;second max(fi…...

windows系统中快速删除node_modules文件

npx命令方式 npx rimraf node_modules 项目中设置 "scripts": {# 安装依赖"i": "pnpm install",# 检测可更新依赖"npm:check": "npx npm-check-updates",# 删除 node_modules"clean": "npx rimraf node_m…...

Spring MVC数据绑定和响应——页面跳转(一)返回值为void类型的页面跳转

一、返回值为void类型的页面跳转到默认页面 当Spring MVC方法的返回值为void类型&#xff0c;方法执行后会跳转到默认的页面。默认页面的路径由方法映射路径和视图解析器中的前缀、后缀拼接成&#xff0c;拼接格式为“前缀方法映射路径后缀”。如果Spring MVC的配置文件中没有配…...

CSS动画keyframes简单样例

一、代码部分 1.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><link rel"stylesheet" href…...

LabVIEW风机跑合监控系统

开发了一种基于LabVIEW的风机跑合监控系统&#xff0c;提高风机测试的效率和安全性。系统通过自动控制风机的启停、实时监控电流和功率数据&#xff0c;并具有过流保护功能&#xff0c;有效减少了人工操作和安全隐患&#xff0c;提升了工业设备测试的自动化和智能化水平。 项目…...

sql语句练习注意点

1、时间可以进行排序&#xff0c;也可以用聚合函数对时间求最大值max&#xff08;时间&#xff09; 例如下面的例子&#xff1a;取最晚入职的人&#xff0c;那就是将入职时间倒序排序&#xff0c;然后limit 1 表&#xff1a; 场景&#xff1a;查找最晚入职员工的所有信息 se…...

如视“VR+AI”实力闪耀2024世界人工智能大会

7月4日&#xff0c;2024世界人工智能大会暨人工智能全球治理高级别会议&#xff08;以下简称为“WAIC 2024”&#xff09;在上海盛大开幕&#xff0c;本届大会由外交部、国家发展和改革委员会、教育部等部门共同主办&#xff0c;围绕“以共商促共享 以善治促善智”主题&#xf…...

华为云交付模式和技术支持

华为云交付模式概览 用户由于自身或者企业属性的原因&#xff0c;对于使用云服务的要求也会有所不同。因此&#xff0c;华为云针对于不同用户的不同要求&#xff0c;提供了以下三种交付模式供用户选择。 公有云模式 公有云的核心属性是共享资源服务华为公有云为个人和企业用户…...

RK3568平台(opencv篇)ubuntu18.04上安装opencv环境

一.什么是 OpenCV-Python OpenCV-Python 是一个 Python 绑定库&#xff0c;旨在解决计算机视觉问题。   Python 是一种由 Guido van Rossum 开发的通用编程语言&#xff0c;它很快就变得非常流行&#xff0c;主要是 因为它的简单性和代码可读性。它使程序员能够用更少的代码行…...

R-CNN:深度学习在目标检测中的革命

R-CNN&#xff1a;深度学习在目标检测中的革命 目标检测是计算机视觉领域的一个核心问题&#xff0c;而R-CNN&#xff08;Regions with Convolutional Neural Networks&#xff09;算法是这一领域的一个重要里程碑。R-CNN及其后续的多种变体&#xff0c;如Fast R-CNN和Faster …...

docker容器技术、k8s的原理和常见命令、用k8s部署应用步骤

容器技术 容器借鉴了集装箱的概念&#xff0c;集装箱解决了什么问题呢&#xff1f;无论形状各异的货物&#xff0c;都可以装入集装箱&#xff0c;集装箱与集装箱之间不会互相影响。由于集装箱是标准化的&#xff0c;就可以把集装箱整齐摆放起来&#xff0c;装在一艘大船把他们…...

ThinkPHP定时任务是怎样实现的?

接到一个需求&#xff1a;定时检查设备信息&#xff0c;2分钟没有心跳的机器&#xff0c;推送消息给相关人员&#xff0c;用thinkphp5框架&#xff0c;利用框架自带的任务功能与crontab配合来完成定时任务。 第一步&#xff1a;分析需求 先写获取设备信息&#xff0c;2分钟之…...

[C++][CMake][生成可执行文件][上]详细讲解

目录 0.准备工作1.添加CMakeLists.txt文件2.执行cmake命令3.变量定义4.指定使用的C标准5.指定输出路径 0.准备工作 add.c#include <stdio.h> #include "head.h"int add(int a, int b) {return ab; }sub.c#include <stdio.h> #include "head.h"…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

数据分析六部曲?

引言 上一章我们说到了数据分析六部曲&#xff0c;何谓六部曲呢&#xff1f; 其实啊&#xff0c;数据分析没那么难&#xff0c;只要掌握了下面这六个步骤&#xff0c;也就是数据分析六部曲&#xff0c;就算你是个啥都不懂的小白&#xff0c;也能慢慢上手做数据分析啦。 第一…...