uniapp - 适用于H5网页 | 小程序 | APP 的完美锚点功能插件，直接复制源码即可使用！类似选项卡点击自动跳转到指定DOM位置的效果！

已于 2024-09-12 15:55:40 修改
阅读量6.9k 收藏 4
点赞数 4
分类专栏： 前端组件与功能(开箱即用) 文章标签： uni-app uniapp锚点插件 uniapp 移动端网页锚点 uniapp 小程序锚点组件 uniapp详细锚点组件源码
于 2023-03-29 22:51:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/129843070
版权
该博客介绍了如何在uniapp中使用锚点插件，实现H5、小程序和APP的完美锚点功能。通过组件源码和示例，展示了选项卡点击自动跳转到DOM位置并高亮的特性，同时提供了详细的Props配置和tabList数据说明。此外，还探讨了SEO优化和不同场景的应用。
摘要由CSDN通过智能技术生成

效果图

真机亲测，实现点击菜单（选项卡）自动定位到锚点位置，并且滑动到锚点区域时自动高亮功能

提供完整插件源码，还有使用的示例，功能强悍无bug，你自己改下想要的样式就行了。

在这里插入图片描述

组件源码

位置无所谓，后面确保引入路径正确即可。

在 components 文件夹下，新建 anchor.vue 文件，一键复制如下代码。

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
uniapp - 全端兼容 “选项卡瞄点定位“ 功能，点击后滚动到锚点位置并且选项卡自动吸顶，当 “经过“ 锚点时自动定位选项卡（详细运行示例源码，超详细注释稳定可靠！）支持H5、App、小程序全平台
王佳斌
03-29 4932
uniapp瞄点选项卡，uniapp锚点，uniapp H5 微信小程序 APP平台锚点定位，uniapp锚点链接，uniapp实现商品详情锚点定位效果，uniapp项目如何实现锚点定位功能，uniapp 微信小程序 h5网页如何使用锚点定位效果，uniapp如何实现锚点跳转，使用uniapp如何实现锚点定位和滚动监听功能，uni-app H5 小程序中使用锚点定位，uni-app添加锚点和监听滚动切换tab，uniapp实现点击吸顶锚点定位，uniapp滚动吸顶+锚点+滚动自动tab切换，uniapp锚点
小程序的学习资料收集
weixin_30414245的博客
02-23 3139
收集学习资料 1：官方工具：https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2：简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3：设计指南：https://mp.weixin.qq.com/debug/wxadoc/desig...
uniapp实现左侧菜单右侧商品锚点组件
Study123wf的博客
05-05 376
原理:利用scroll-view绑定scroll-into-view String 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素。scroll-view：用于区域滚动。// 如果没有防抖会触发许多次。// timer定义在全局。注意点: 滚动增加防抖。
uni-app使用scroll-view实现锚点定位和滚动监听功能
taozi8957的博客
05-19 6511
uni-app使用scroll-view实现锚点定位和滚动监听功能
uniapp中实现锚点定位滚动效果
qq_44741577的博客
09-30 613
【代码】uniapp中实现锚点定位滚动效果。
uniapp小程序锚点(只支持当前页面操作，切勿跨页面操作)
元宝的博客
03-08 949
一、uniapp小程序点击某个事件，跳到指定位置 需求1：点击按钮跳到当前页面指定位置 but(){ uni.createSelectorQuery().select('.pinglun').boundingClientRect(data=>{//目标位置的节点：类class或者id uni.createSelectorQuery().select(".pinglun_footer").boundingClientRect(res=>{//最外层盒子的节点：类class或者id
uni app锚点定位 、自动吸顶、滚动自动选择对应的锚点
qq_44678911的博客
08-11 2197
在点击tab的时候，发现当页面的内容有多个不足以撑满屏幕，比如（法务部门、人事部门这个两个tab的时候）（见下图），在前几个tab的被选中，再次点击最后两个tab的时候，会发现最后两个tab在选中的瞬间又会回到运营部门，我回想了问题可能出现在哪里，一想肯定是onPageScroll事件重新触发了，所以我在点击tab的时候，设置了 isTabChange的boolean值，在完成页面滚动的完成事件之后再次设置isTabChange == false，这样避免在这个期间，受到页面监听滚动事件的影响。
uni-app实现锚点定位功能
Helsonlin
04-18 9115
效果图 功能实现 使用uni-app自带scroll-view组件利用scroll-into-view属性来自定滚动到的子元素的id，从而实现锚点功能。需要注意的地方有scroll-view需要指定高度，利用css来指定高度。 代码 <view class="service_item_list"> <u-tabs ref="tabs" font-size="30" :list="serviceList" :show-bar="true" :current="current" b
uniapp如何实现锚点定位?
TeroZhang的博客
11-12 3643
在scroll-view组件中有一个scroll-into-view属性：（值应为某子元素id。设置哪个方向可滚动，则在哪个方向滚动到该元素）。【官方scroll-view说明】 此属性的意思则是此属性的值为子元素设置的id时，则可跳转到子元素位置。 先看下效果： 直接上代码： html: <template> <view> <scroll-view scroll-y="true" :scroll-into-view="intoView" :style="`height
uni-app+ts----微信小程序锚点定位 、自动吸顶、滚动自动选择对应的锚点（点击tab跳转对应的元素位置）
heavenz19的博客
11-27 1515
【代码】uni-app+ts----微信小程序锚点定位 、自动吸顶、滚动自动选择对应的锚点（点击tab跳转对应的元素位置）
uniapp开发之锚点定位，页面滑动菜单回显效果实现
m0_72791534的博客
06-16 1340
为了提升交互，在前端开发中经常会碰到，滚动/滑动页面时菜单回显的效果。有一天，产品找到我说uniapp中这个页面可以做到滑动后在上边按钮回显吗？我说能能，特此记录锚点定位的问题。1、当前各个分组dom的id 2、各个分组的dom的初始位置 3、获取当前滚动条的滚动距离 4、监听滚动事件，根据监听的的滚动距离和初始位置做比较，回显菜单先上效果图： 代码如下： 2、uniapp页面开发时需要注意和h5的不同之处： 1） uniapp有自带的监听页面滚动的方法 onPageScroll 2） uniapp创建的a
微信小程序学习指南
weixin_30446197的博客
12-13 3473
作者：初雪链接：https://www.zhihu.com/question/50907897/answer/128494332来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 微信小程序正式公测， 张小龙全面阐述小程序，定档1月9日上线（附90分钟演讲全文） ... 前言：新人第一坑，跳坑指南：修改后，必须保存；ctrl+S； 1：官方工具：http...
牛客网-精华专题-前端校招面试题目合集
qq_41254204的博客
02-01 2997
前端校招面试题目合集 501HTML HTML 浏览器页面有哪三层构成，分别是什么，作用是什么? 构成：结构层(structural layer)、表示层(presentation layer)、行为层 (behavior layer) 分别是：HTML、CSS、JavaScript 作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务 H...
小程序-uni-app：实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)
snowball的博客
07-09 5234
Uniapp支持锚点连接，可以通过以下步骤实现锚点连接。
uniapp锚点定位 、自动吸顶、滚动自动选择对应的锚点
weixin_51010848的博客
12-05 3713
uniapp锚点定位 、自动吸顶、滚动自动选择对应的锚点
uniapp锚点定位
mygoes
01-05 6674
uniapp 锚点定位
uniapp 锚点链接
最新发布
weixin_44788872的博客
10-08 137
【代码】uniapp 锚点链接。
uniApp h5和小程序锚点跳转
m0_57547956的博客
09-07 328
需求是点击导航的icon 自动定位锚点到当前页 代码如下 console.log(xitem, '锚点'); uni.createSelectorQuery().select("." + 'qianggou').boundingClientRect( data => { //目标位置的节点：类或者id uni.createSelectorQuery().select(".index-box").boundingClientRect( res =.
uniapp 锚点定位
beyond520lin的博客
06-20 270
主要内容：先获取到for上的class的高度，然后保存，在需要的地方调用
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值