微信小程序 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):旅游景区的应用,美爆啦。
景区可视化通常指的是利用现代科技手段,如地图、虚拟现实(VR)、增强现实(AR)、无人机航拍等技术,将景区的地理信息、景点分布、交通路线、游客服务设施等内容以可视化的方式呈现给游客或者管理者࿰…...

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

PCDN技术如何提高内容分发效率?(壹)
PCDN技术提高内容分发效率的操作主要体现在以下几个方面: 利用P2P技术:PCDN以P2P技术为基础,通过挖掘利用边缘网络的海量碎片化闲置资源,实现内容的分发。这种方式可以有效减轻中心服务器的压力,降低内容传输的延迟&a…...
Java 中Json中既有对象又有数组的参数 如何转化成对象
1.示例一:解析一个既包含对象又包含数组的JSON字符串,并将其转换为Java对象 在Java中处理JSON数据,尤其是当JSON结构中既包含对象又包含数组时,常用的库有org.json、Gson和Jackson。这里我将以Gson为例来展示如何解析一个既包含对…...
什么是数据挖掘(python)
文章目录 1.什么是数据挖掘2.为什么要做数据挖掘?3数据挖掘有什么用处?3.1分类问题3.2聚类问题3.3回归问题3.4关联问题 4.数据挖掘怎么做?4.1业务理解(Business Understanding)4.2数据理解(Data Understanding&#x…...

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

C++ | Leetcode C++题解之第213题打家劫舍II
题目: 题解: 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类型,方法执行后会跳转到默认的页面。默认页面的路径由方法映射路径和视图解析器中的前缀、后缀拼接成,拼接格式为“前缀方法映射路径后缀”。如果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的风机跑合监控系统,提高风机测试的效率和安全性。系统通过自动控制风机的启停、实时监控电流和功率数据,并具有过流保护功能,有效减少了人工操作和安全隐患,提升了工业设备测试的自动化和智能化水平。 项目…...

sql语句练习注意点
1、时间可以进行排序,也可以用聚合函数对时间求最大值max(时间) 例如下面的例子:取最晚入职的人,那就是将入职时间倒序排序,然后limit 1 表: 场景:查找最晚入职员工的所有信息 se…...

如视“VR+AI”实力闪耀2024世界人工智能大会
7月4日,2024世界人工智能大会暨人工智能全球治理高级别会议(以下简称为“WAIC 2024”)在上海盛大开幕,本届大会由外交部、国家发展和改革委员会、教育部等部门共同主办,围绕“以共商促共享 以善治促善智”主题…...

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

RK3568平台(opencv篇)ubuntu18.04上安装opencv环境
一.什么是 OpenCV-Python OpenCV-Python 是一个 Python 绑定库,旨在解决计算机视觉问题。 Python 是一种由 Guido van Rossum 开发的通用编程语言,它很快就变得非常流行,主要是 因为它的简单性和代码可读性。它使程序员能够用更少的代码行…...
R-CNN:深度学习在目标检测中的革命
R-CNN:深度学习在目标检测中的革命 目标检测是计算机视觉领域的一个核心问题,而R-CNN(Regions with Convolutional Neural Networks)算法是这一领域的一个重要里程碑。R-CNN及其后续的多种变体,如Fast R-CNN和Faster …...

docker容器技术、k8s的原理和常见命令、用k8s部署应用步骤
容器技术 容器借鉴了集装箱的概念,集装箱解决了什么问题呢?无论形状各异的货物,都可以装入集装箱,集装箱与集装箱之间不会互相影响。由于集装箱是标准化的,就可以把集装箱整齐摆放起来,装在一艘大船把他们…...

ThinkPHP定时任务是怎样实现的?
接到一个需求:定时检查设备信息,2分钟没有心跳的机器,推送消息给相关人员,用thinkphp5框架,利用框架自带的任务功能与crontab配合来完成定时任务。 第一步:分析需求 先写获取设备信息,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"…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...

2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板(STM32F103RBT6)通过I2C驱动ICM20948九轴传感器,实现姿态解算,并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化,适合嵌入式及物联网开发者。在基础驱动上新增…...
Python竞赛环境搭建全攻略
Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型(算法、数据分析、机器学习等)不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

Python训练营-Day26-函数专题1:函数定义与参数
题目1:计算圆的面积 任务: 编写一个名为 calculate_circle_area 的函数,该函数接收圆的半径 radius 作为参数,并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求:函数接收一个位置参数 radi…...
书籍“之“字形打印矩阵(8)0609
题目 给定一个矩阵matrix,按照"之"字形的方式打印这个矩阵,例如: 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为:1,…...

初探用uniapp写微信小程序遇到的问题及解决(vue3+ts)
零、关于开发思路 (一)拿到工作任务,先理清楚需求 1.逻辑部分 不放过原型里说的每一句话,有疑惑的部分该问产品/测试/之前的开发就问 2.页面部分(含国际化) 整体看过需要开发页面的原型后,分类一下哪些组件/样式可以复用,直接提取出来使用 (时间充分的前提下,不…...