uniapp 微信小程序 锚点跳转

uniapp文档

以下是我遇到的业务场景,是点击商品分类的某一类  然后页面滚动至目标分类,

首先第一步是设置锚点跳转的目的地,在目标的dom上面添加id属性

然后给每个分类每一项添加点击事件,分类这里的item数据里面有一字段是和上面商品dom设置的id值是一一对应的

下面是点击事件,我发现有两种方式可以实现锚点跳转,一个是直接通过给api配置selector参数就可以跳转至id元素处,另一个是先获取dom的top值,然后通过给api配置scrollTop值来实现页面滚动。

 

除了上面方式,其实还可以使用scroll-view,因为上面已经满足我的业务需求,故就不在此过多赘述,有兴趣的同僚可以试试scroll-view的实现方式。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/62189.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot初级开发--多环境配置的集成(9)

在Springboot的开发中,我们经常要切换各种各样的环境配置,比如现在是开发环境,然后又切换到生产环境,这个时候用多环境配置就是一个明智的选择。接下来我们沿用上一章的工程来配置多环境配置工程。 1.准备多环境配置文件 这里我…

Flutter 安装教程 + 运行教程

1.下载依赖 https://flutter.cn/docs/get-started/install/windows 解压完后根据自己的位置放置,如(D:\flutter) 注意 请勿将 Flutter 有特殊字符或空格的路径下。 请勿将 Flutter 安装在需要高权限的文件夹内,例如 C:\Program …

Redis 教程 - 主从复制

Redis 教程 - 主从复制 Redis 支持主从复制(Master-Slave Replication),通过主从复制可以将一个 Redis 服务器(主节点)的数据复制到其他 Redis 服务器(从节点),以实现数据的冗余备份…

Unity List相关问题

1、list随机数值&#xff0c;重复的数量不超过指定大小。 using System.Linq; private List<int> iconIndexs; for (int i 0; i < 5; i) {int newIndex Random.Range(0, 3);// 检查列表中已有的相同元素的数量int count iconIndexs.Count(x > x newIndex);// …

FireFox禁用HTTP2

问题 最近需要调试接口&#xff0c;但是&#xff0c;Chrome都是强制使用h2协议&#xff0c;即HTTP/2协议。为了排除h2协议排除对接口调用的影响&#xff0c;需要强制浏览器使用HTTP1协议。 解决 FireFox 设置firefox的network.http.http2.enabled为禁用&#xff0c;这样就禁…

[ros][ubuntu]ros在ubuntu18.04上工作空间创建和发布一个话题

构建catkin工作空间 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src catkin_init_workspace cd ~/catkin_ws/ catkin_make 配置环境变量 echo "source ~/catkin_ws/devel/setup.bash" >> ~/.bashrc source ~/.bashrc 检查环境变量 echo $ROS_PACKAGE_PATH…

【NVIDIA CUDA】2023 CUDA夏令营编程模型(二)

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…

Vue3 select循环多个,选项option不能重复被选

Vue3 select循环多个&#xff0c;选项option不能重复被选 环境&#xff1a;vue3tsviteelement plus 实现目标&#xff1a;Vue3 select循环多个&#xff0c;当其中一个option值被选后&#xff0c;其他select里面不能再重复选择该option值。第二种&#xff0c;当其中一个option值…

SNN论文总结

Is SNN a great work ? Is SNN a convolutional work ? ANN的量化在SNN中是怎么体现的&#xff0c;和threshold有关系吗&#xff0c;threshold可训练和这个有关吗&#xff08;应该无关&#xff09; 解决过发放不发放的问题。 Intuation SNN编码方式 Image to spike patter…

后端面试话术集锦第 十 篇:springMVC面试话术

这是后端面试集锦第十篇博文——springMVC面试话术❗❗❗ 1. 介绍一下springMVC springmvc是一个视图层框架,通过MVC模型让我们很方便的接收和处理请求和响应。 我给你说说他里边的几个核心组件吧: 它的核心控制器是DispatcherServlet,他的作用是接收用户请求,然后给用户…

SASS常用内置函数

1&#xff0c;math 引入&#xff1a;use "sass:math"; 常用函数&#xff1a; ceil($number) - 向上取整floor($number) - 向下取整round($number) - 四舍五入max($number...) - 比较若干数值并取最大值min($number...) - 比较若干数值并取最小值random() - 取0~1之…

C++项目:网络版本在线五子棋对战

目录 1.项目介绍 2.开发环境 3.核心技术 4. 环境搭建 5.websocketpp 5.1原理解析 5.2报文格式 5.3websocketpp常用接口介绍 5.4websocket服务器 6.JsonCpp使用 6.1Json数据格式 6.2JsonCpp介绍 7.MySQL API 7.1MySQL API介绍 7.2MySQL API使用 7.3实现增删改查…

TCP之超时重传、流量控制和拥塞控制

一、超时重传 TCP超时重传是TCP协议中的一种机制&#xff0c;用于在发生丢包或数据包未及时确认的情况下&#xff0c;重新发送未确认的数据段。 当发送方发送一个数据段后&#xff0c;会启动一个定时器&#xff08;称为超时计时器&#xff09;&#xff0c;等待接收方的确认。…

kafka如何避免消费组重平衡

目录 前言&#xff1a; 协调者 重平衡的影响 避免重平衡 重平衡发生的场景 参考资料 前言&#xff1a; Rebalance 就是让一个 Consumer Group 下所有的 Consumer 实例就如何消费订阅主题的所有分区达成共识的过程。在 Rebalance 过程中&#xff0c;所有 Consumer 实例…

大数据精准营销获客能为企业带来哪些东西?

广告圈里一句名言:我知道我的广告浪费了一半&#xff0c;但我不知道浪费了哪一半。当前&#xff0c;越来越多的企业在大数据思维指导下进行广告投放&#xff0c;广告能通过对人群的定向&#xff0c;投放给准确的目标顾客&#xff0c;特别是互联网广告现在能够做到根据不同的人向…

XSSchallenge1-20

test1 第一题直接在test插入XSS代码即可 test2 第二关对内容进行”“包裹 这里可以采用”>来绕过 test3 代码审计发现这里用了htmlspecialchars函数&#xff0c;这个函数对<>和’ “等进行了转义&#xff0c;这里可以用事件来绕过 test4 这里用了str_replace&a…

GIT使用教程(超详细)

目录 前言 1 git安装 2 增加git账户 3 git全局参数配置 4 创建本地仓库 5 关联远程分支 6 删除远程分支关联 7. 删除分支 8 git stash 9 git reset 10 git checkout 11 合并 12 git log 13 git提交模板 &#x1f388;个人主页&#x1f388;&#xff1a;li…

14家展商集中亮相!8月30-31日,智能汽车软件与座舱车联大会

过去几年&#xff0c;在特斯拉及新势力的带动下&#xff0c;车企的盈利模式正在寻求从“一次售卖”转变为“硬件预埋&#xff0b;软件付费解锁”&#xff0c;背后是驱动汽车软件架构的迭代&#xff0c;即从面向信号的软件架构&#xff0c;过渡至面向服务的SOA架构。 同时&#…

Flutter小功能实现-咖啡店

1 导航栏实现 效果图&#xff1a; 1.Package google_nav_bar: ^5.0.6 使用文档&#xff1a; google_nav_bar | Flutter Package 2.Code //MyBottomNavBar class MyBottomNavBar extends StatelessWidget {void Function(int)? onTabChange;MyBottomNavBar({super.key, …

JVM下篇知识

第01章&#xff1a;概述篇 第02章&#xff1a;JVM监控及诊断工具-命令行篇 第03章&#xff1a;JVM监控及诊断工具-GUI篇 第04章&#xff1a;JVM运行时参数 第05章&#xff1a;分析GC日志