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

uniapp 滚动到指定元素的位置(锚点)

需求:在页面中,不管位于何处,点击按钮页面滚动到对应的标题位置。

最简单有效的方式(直接复制改数据就行)

使用  scroll-view 标签的属性:scroll-top(距离值 num) 或 scroll-into-view(子元素的id,不能以数字开头 string);

<scroll-view class="scroller" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">你渲染的内容
</scroll-view>

点击事件(位置随便写,根据页面需求)

<p v-for="(item,index) in gameList[current-1].list" :key="index" @tap="filterList(item.name)">{{item.name}}
</p>

需要滚动到的地方(使用动态id)

<p :id="item.name">{{item.name}}</p>

事件

filterList(id) {uni.createSelectorQuery().select('#' + id).boundingClientRect(function(rect){// 使用scrollIntoView方法滚动到目标元素uni.pageScrollTo({scrollTop: rect.top - 70,duration: 300})}).exec();},

 总体思路:

1.使用scroll-view 标签,并配置;

2.点击事件获取想要的id;

3.设置滚动距离,时长

相关文章:

uniapp 滚动到指定元素的位置(锚点)

需求&#xff1a;在页面中&#xff0c;不管位于何处&#xff0c;点击按钮页面滚动到对应的标题位置。 最简单有效的方式&#xff08;直接复制改数据就行&#xff09; 使用 scroll-view 标签的属性&#xff1a;scroll-top(距离值 num) 或 scroll-into-view(子元素的id,不能以…...

Spring AOP 的 afterReturing 返回值是否能修改问题

文章目录 结论举例子原因外传 结论 最近要搞脱敏信息&#xff0c;所以&#xff0c;想了几种方案&#xff0c;最后使用全局的接口拦截&#xff0c;但是&#xff0c;又不能用注解的方式&#xff0c;毕竟是几年的老产品&#xff0c;有很多限制。 中间尝试过使用Spring AOP 的 aft…...

MyBatis分页插件PageHelper的使用及特殊字符的处理

目录 一、PageHelper简介 1.什么是分页 2.PageHelper是什么 3.使用PageHelper的优点 二、PageHelper插件的使用 原生limit查询 1. 导入pom依赖 2. Mybatis.cfg.xml 配置拦截器 3. 使用PageHelper进行分页 三、特殊字符的处理 1.SQL注入&#xff1a; 2.XML转义&#…...

[语音识别] 基于Python构建简易的音频录制与语音识别应用

语音识别技术的快速发展为实现更多智能化应用提供了无限可能。本文旨在介绍一个基于Python实现的简易音频录制与语音识别应用。文章简要介绍相关技术的应用&#xff0c;重点放在音频录制方面&#xff0c;而语音识别则关注于调用相关的语音识别库。本文将首先概述一些音频基础概…...

Matlab彩色图像转索引图像

索引图像 索引图像是一种把像素值直接作为RGB调色板下标的图像。索引图像包括一个数据矩阵X&#xff0c;一个调色板矩阵map&#xff0c;也称为颜色映像矩阵。其中&#xff0c;数据矩阵X可以是8位无符号整型、16位无符号整型或双精度类型。调色板矩阵map是一个m3的数据阵列&…...

测试框架pytest教程(11)-pytestAPI

常量 pytest.__version__ #输出pytest版本 pytest.version_tuple #输出版本的元组形式 功能 pytest.approx pytest.approx 是一个用于进行数值近似比较的 pytest 断言工具。 在测试中&#xff0c;有时候需要对浮点数或其他具有小数部分的数值进行比较。然而&#xff0c;由于…...

Docker自学:利用FastAPI建立一个简单的web app

环境配置&#xff1a;下载Docker Desktop 文件一&#xff1a;main.py from typing import Unionfrom fastapi import FastAPIimport uvicornapp FastAPI()app.get("/") def read_root():return {"Hello": "World"}app.get("/items/{item…...

微调bert做学术论文分类(以科大讯飞学术论文分类挑战赛为例)

代码 12-How to Fine-Tune BERT for Text Classification&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1EKggbyC4ZW-ufnDW45eKzA 提取码&#xff1a;k3b2 baseline 链接&#xff1a;https://pan.baidu.com/s/12hkZNJjQ__FGAHiF3fifvQ 提取码&#xff1a;88tb 数据…...

Springboot中sharding-jdbc的API模式并使用自定义算法

Springboot中sharding-jdbc的API模式并使用自定义算法 可配合AbstractRoutingData使用切换数据源 程序用到了AbstractRoutingData来切换数据源&#xff08;数据源是自定义的格式编写并没有用springboot的自动装配的格式写&#xff09;&#xff0c;但是又用到sharding-jdbc进行…...

MySQL回表是什么?哪些情况下会回表

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责…...

VR、AR、MR 傻傻分不清楚?区别的底层逻辑?

VR是一种能够制作虚拟物体并与人互动的基础技术。它与操作者所处的环境无关。AR可以让在特定位置出现或消失。MR可以让虚拟物体与真实物体进行互动。 AR和MR的大部分应用场景都是随机的&#xff0c;所以硬件基本都采用手机和眼镜。提升了便携性。牺牲了性能。这就导致了AR与MR…...

VScode运行C语言出现的调试问题 lauch:program does not exist 解决方法

"lauch:program does not exist"错误通常表示编译器或调试器无法找到指定的可执行文件。这可能是由于几个原因引起的。首先&#xff0c;确保你的源代码文件夹路径不包含中文字符&#xff0c;因为这可能导致编译器无法识别文件。其次&#xff0c;检查你的launch.json文…...

云原生安全:保护现代化应用的新一代安全策略

随着云计算和容器技术的快速发展&#xff0c;云原生应用已成为现代化软件开发和部署的主流趋势。然而&#xff0c;随之而来的安全挑战也变得更加复杂和严峻。本文将深入探讨云原生安全的概念、原则和最佳实践&#xff0c;帮助您理解如何有效保护云原生应用和敏感数据。 第一部…...

mysql操作

1、字符转Decimal CAST(column AS DECIMAL(9,2)) 2、将计算结果取两位小数&#xff1a; round(column, 2) 3、查询非空 select * from table_XX where id is not null; 4、连表update更新 update a inner join (select yy from b) c on a.id c.id set a.xx c.yy...

前端(十四)——DOM节点操作手册:你需要了解的一切

&#x1f642;博主&#xff1a;小猫娃来啦 &#x1f642;文章核心&#xff1a;DOM节点操作手册&#xff1a;你需要了解的一切 文章目录 前言DOM基础知识操作现有节点创建新节点遍历节点树修改节点属性和样式事件处理实践应用动态创建表格动态更新列表 前言 DOM&#xff08;文档…...

PDF怎么转成PPT文件免费?一个软件解决

随着科技的不断发展和进步&#xff0c;电子文档已经成为我们日常工作和学习中不可或缺的一部分。PDF作为一种跨平台的文件格式&#xff0c;以其可靠性和易读性而备受推崇。然而&#xff0c;在某些情况下&#xff0c;我们可能需要PDF怎么转成PPT文件免费&#xff0c;以便更好地展…...

数据结构基础:P3-树(上)----编程作业02:List Leaves

本系列文章为浙江大学陈越、何钦铭数据结构学习笔记&#xff0c;系列文章链接如下&#xff1a; 数据结构(陈越、何钦铭)学习笔记 文章目录 一、题目描述二、整体思路与实现代码 一、题目描述 题目描述&#xff1a; 给定一棵树&#xff0c;按照从上到下、从左到右的顺序列出所有…...

山西电力市场日前价格预测【2023-08-25】

日前价格预测 预测明日&#xff08;2023-08-25&#xff09;山西电力市场全天平均日前电价为314.22元/MWh。其中&#xff0c;最高日前电价为336.17元/MWh&#xff0c;预计出现在18: 30。最低日前电价为283.05元/MWh&#xff0c;预计出现在24: 00。 价差方向预测 1&#xff1a; 实…...

手机无人直播软件,有哪些优势?

近年来&#xff0c;随着手机直播的流行和直播带货的市场越来越大&#xff0c;手机无人直播软件成为许多商家开播带货的首选。在这个领域里&#xff0c;声音人无人直播系统以其独特的优势&#xff0c;成为市场上备受瞩目的产品。接下来&#xff0c;我们将探讨手机无人直播软件给…...

SpringBoot概述SpringBoot基础配置yml的使用多环境启动

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaEE 操作系统 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 SpringBoot简介 一、 SpringBoot概述1.1 起步依赖…...

OpenClaw多模态扩展:结合百川2-13B-4bits与OCR的图像信息处理流程

OpenClaw多模态扩展&#xff1a;结合百川2-13B-4bits与OCR的图像信息处理流程 1. 为什么需要多模态能力扩展&#xff1f; 上周我需要整理一批技术文档的截图&#xff0c;包含代码片段、错误日志和流程图。手动转录不仅耗时&#xff0c;还容易出错。这让我开始思考&#xff1a…...

微信聊天记录永久保存:WeChatExporter开源工具全流程指南

微信聊天记录永久保存&#xff1a;WeChatExporter开源工具全流程指南 【免费下载链接】WeChatExporter 一个可以快速导出、查看你的微信聊天记录的工具 项目地址: https://gitcode.com/gh_mirrors/wec/WeChatExporter 问题&#xff1a;数据丢失的三重警示 2023年某科技…...

AudioSeal实战教程:Python API调用AudioSeal模型实现批量音频水印处理

AudioSeal实战教程&#xff1a;Python API调用AudioSeal模型实现批量音频水印处理 1. 项目概述与核心价值 AudioSeal是Meta开源的专业级音频水印系统&#xff0c;专门用于AI生成音频的检测和溯源。这个工具能帮助内容创作者、平台运营者和版权方解决一个关键问题&#xff1a;…...

如何让2015年前的MacBook Pro焕发新生?OpenCore Legacy Patcher完全指南

如何让2015年前的MacBook Pro焕发新生&#xff1f;OpenCore Legacy Patcher完全指南 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否还在为手中的老款Mac无法升级到…...

宝藏分享!实用AI写教材工具,快速产出低查重专业教材!

AI写教材工具&#xff1a;提升创作效率的利器 在撰写教材的过程中&#xff0c;总会遇到一种令人沮丧的“慢节奏”。尽管框架与资料已经准备就绪&#xff0c;内容创作却常常陷入困境&#xff1a;一句话反复推敲数十分钟&#xff0c;还是觉得表达不够完美&#xff1b;章节间的衔…...

当经典耦合器原理‘失灵’时:我在ADS里另辟蹊径优化90度电桥的实战记录

当经典耦合器原理‘失灵’时&#xff1a;我在ADS里另辟蹊径优化90度电桥的实战记录 射频工程师们对90度耦合电桥的设计规范早已烂熟于心——那些教科书上的理想模型、对称结构和完美参数。但当我在3.5GHz频段用Rogers 4003C板材实现时&#xff0c;仿真结果却总与理论预测相差甚…...

GHelper轻量级解决方案:华硕笔记本性能调校完全指南

GHelper轻量级解决方案&#xff1a;华硕笔记本性能调校完全指南 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models 项目地址:…...

别再手动调参了!用Matlab+NRBO-BP+NSGAII搞定工艺优化,自动生成最优参数组合Excel

工艺优化新范式&#xff1a;基于NRBO-BP与NSGAII的智能参数寻优系统 在化工、材料、制造等领域的工艺优化过程中&#xff0c;工程师和研究人员常常面临一个共同的挑战&#xff1a;如何在有限的实验资源和时间约束下&#xff0c;从海量的参数组合中找到最优解。传统的手动调参方…...

腾讯音乐开源的SuperSonic到底强在哪?手把手教你配置专属数据分析Agent

腾讯音乐SuperSonic深度解析&#xff1a;如何打造智能数据问答Agent 当企业数据量呈指数级增长时&#xff0c;传统BI工具已经难以满足实时决策的需求。腾讯音乐开源的SuperSonic作为新一代AIBI平台&#xff0c;通过融合Chat BI与Headless BI两大范式&#xff0c;正在重新定义数…...

BarrageGrab技术深度解析:构建高可用跨平台直播弹幕抓取架构

BarrageGrab技术深度解析&#xff1a;构建高可用跨平台直播弹幕抓取架构 【免费下载链接】BarrageGrab 抖音快手bilibili直播弹幕wss直连&#xff0c;非系统代理方式&#xff0c;无需多开浏览器窗口 项目地址: https://gitcode.com/gh_mirrors/ba/BarrageGrab 在当今直播…...