使用uniapp如何实现锚点定位和滚动监听功能

最新推荐文章于 2023-10-19 17:32:42 发布
最新推荐文章于 2023-10-19 17:32:42 发布
阅读量8.2k 收藏 9
点赞数 1
分类专栏： 前端 # 代码知识 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pgzero/article/details/106069112
版权

一、如何实现锚点定位
在scroll-view组件中有一个scroll-into-view属性：（值应为某子元素id。设置哪个方向可滚动，则在哪个方向滚动到该元素）。
此属性的意思则是此属性的值为子元素设置的id时，则可跳转到子元素位置
在这里插入图片描述
例如上面图片代码，点击tab切换栏时，改变toView的值，使其为对应下方id则可实现滚动到当前子元素位置

二、如何实现滚动到子元素位置时改变tab栏状态
在这里插入图片描述
此选择器可得到元素距离顶部的位置，在@scroll事件中监听子元素距离顶部距离，则可实现滚动改变tab栏状态功能

pgzero
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp vu3 scroll-view 滚动到指定位置
TaylorY的博客
05-15 524
（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。将选择器的选取范围更改为自定义组件。
Vue监听滚动实现锚点定位(双向)示例
10-16
今天小编大家分享一篇Vue监听滚动实现锚点定位(双向)示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uniapp使用scroll-into-view实现锚点定位和滚动监听功能
weixin_47136265的博客
08-15 3098
1、点击左侧分类导航栏页面右侧区域滚动到对应的分类数据，通过scroll-into-view实现，2、滚动右侧区域，滚动到哪一分类的的区域，左侧导航栏对应分类的导航变为选中状态，通过滚动监听实现。
uni-app实现锚点定位功能
Helsonlin
04-18 8716
效果图 功能实现 使用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使用scroll-into-view实现锚点定位和滚动监听功能【楼层效果 / 侧边导航联动效果】
m0_49714202的博客
09-27 1994
uniapp使用scroll-into-view实现锚点定位和滚动监听功能【楼层效果 / 侧边导航联动效果】
「神奇的锚点定位：探索UniApp中实现滚动定位效果，与1024程序员节同欢，解析技术之美」
最新发布
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
10-19 2321
在这个即将到来的1024程序员节，我们将迎来一场技术盛宴。作为程序员的你，相信对于技术的热爱早已融入了生命的每一个角落。而正是因为这份热爱，我们才能不断追求创新、探索未知、解决问题。在这一年里，科技行业发展迅猛，无数令人惊叹的新技术不断涌现。人工智能、区块链、云计算、物联网……这些概念成为了我们日常工作中的关键词。面对如此繁杂的技术世界，我们时刻保持着学习的姿态，不断拓展自己的技术边界。而正是因为这种渴望掌握新知识的态度，我们才能够站在技术的前沿，体验最新最潮的技术趋势。
Uniapp实现锚点跳转和滚动监听(不用scroll-view)微信小程序版
weixin_45389051的博客
12-15 3551
点击上面的商品，评价，详情可以滚动到相应的地方，当从上往下滑动的时候，滑到某个地方相应的tab就会被选中 我之前的博客写过一个用scroll-view实现这个功能的demo,这篇就不用scroll-view实现。(有兴趣的可以去看看哦，第3篇) 先说这一块，锚点跳转 <view class="navs-nav" :class="{ navactivetext: index == num }" :style=" 'height:' + tophight.height + 'px;' + 'line.
uniapp锚点定位 、自动吸顶、滚动自动选择对应的锚点
weixin_51010848的博客
12-05 3056
uniapp锚点定位 、自动吸顶、滚动自动选择对应的锚点
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
10-16
今天小编就为大家分享一篇vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于vue监听滚动事件实现锚点链接平滑滚动的方法
08-28
两者都使用 setTimeout 函数来实现滚动的延迟效果，从而实现平滑滚动。 三、组件 HTML 结构 组件 HTML 结构非常简单，只需要包含左边的菜单列表和右边的菜品列表。右边菜品列表的结构需要特别注意，需要使用 ...
使用uniapp框架实现小程序的锚点跳转以及滚动监听
weixin_45389051的博客
03-03 4761
主要利用了scroll-view里面的属性 一.首先是静态布局 <template> <view class="ld"> <view class="left"> <view v-for="(item,index) in list" :key="index" :class="{active:currentIndex==index}" @clic...
uni-app锚点跳转及滚动Tab切换(非scroll-view)
Chauncey的博客
03-25 2754
页面部分 <template> <view class="idlePages"> <my-fixedTop> <view id="myNav"> <my-nav left-icon="back" :title="title" @click-left="back" shadow="none" :statusBar="true"></my-nav> <view class="nav-top-bar" v-i
uniapp tab切换三种方式（切换内容不同情况下使用）
热门推荐
weixin_50639421的博客
09-14 1万+
uniapp tab切换两种方式（切换内容不同情况下使用） 文章目录**uniapp tab切换两种方式（切换内容不同情况下使用）**一、tabs切换两种方式（切换内容不同情况下使用）1.直接拆开使用（建议tab项比较少使用）2.使用scroll-view滑动 一、tabs切换两种方式（切换内容不同情况下使用） 1.直接拆开使用（建议tab项比较少使用） <template> <view> <view class="head-nav"> <view
uniapp实现商品详情锚点定位效果
那片枫叶~
03-04 1806
1、直接复制粘贴引入uniapp页面 如果缺少什么css 自己补充就好了，做个笔记，内容过少的情况，tab选项不是百分百的切换到最后一个，没想好怎么优化 <template> <view class="page"> <!-- 顶部选卡 --> <view class="scroll-row d-flex justify-between border-top position-fixed top-0" style="height: 80rpx;backg
微信小程序scroll-view锚点定位+界面滑动改变tab（防京东详情页）
随身笔记
01-20 5817
电商详情页的锚点定位+tab切换+滑动切换
uniapp实现tabs切换（可滑动）
不会写代码的前端
08-14 9655
uniapp 实现tabs切换
uni-app tab滑动切换
qq_43579525的博客
07-13 1万+
1.父组件index.vue <template> <view> <!-- * 头部tab * 1.头部tab在点击的时候需把自己的index传到父组件中去通过 * this.$emit('方法名',index); * * --> <swiper-tab-head :tabBars="tabBar...
uni-app 简单顶部tab切换菜单3—可滑动切换菜单
qq_59795720的博客
05-27 6242
顶部tab是可滑动，用scroll-view实现，内容部分比较潦草，可以自行更改，话不多说上代码，最后有完整的代码（复制即可用） HTML <template> <view> <!-- tab部分 --> <swiper class="ct_tab"> <swiper-item :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in t...
uniapp页面滚动监听
chenrui310的博客
01-03 3752
先在前面总结下，下面一共有3种监听滚动的方法。昨天在做uniapp的图片懒加载，从网上找了个插件，导入到HBuilderX后，捣鼓了一晚上，总算是正常跑起来了。今天早上，把代码copy到项目上，结果只有第一屏的图片能展示，滑动后，下面的图片都不显示了！-_-!因为有了昨晚的经验，很快就定位到问题是滚动监听出现了问题。这个插件的图片懒加载一个关键的地方就是用到滚动监听。
vue项目使用锚点双向定位 实现滚动功能
08-30
在Vue项目中实现锚点双向定位和滚动功能可以通过以下几个步骤来实现： 1. 首先，在需要添加锚点的地方给需要定位到的元素加上一个唯一的id。例如，我们可以在需要滚动到的元素上添加类似于`<div id="section1">...</div>`的id属性。 2. 在导航栏或其他需要触发滚动的地方，使用vue-router或Vue的事件监听器等方式来监测点击事件。例如，我们可以在导航栏菜单项上添加点击事件的监听。 3. 在点击事件的处理函数中，使用`window.scrollTo`或者Vue的`$scrollTo`方法等来实现滚动到指定位置。例如，我们可以使用`window.scrollTo(0, document.getElementById("section1").offsetTop)`来实现滚动到id为"section1"的元素。 4. 在需要滚动到指定位置的元素上，使用Vue的过渡动画等方式来增强可视效果。例如，可以使用Vue的`<transition>`组件包裹需要滚动到的元素，并添加相应的动画效果。 5. 如果需要实现滚动到指定位置后更新URL地址的功能，可以使用Vue Router的`push`或`replace`方法来更新路由。例如，我们可以在点击事件的处理函数中使用`this.$router.push({path: "/example#section1"})`来实现滚动到id为"section1"的元素同时更新URL地址。 综上所述，通过以上步骤，我们可以在Vue项目中实现锚点双向定位和滚动功能。具体实现方式可以根据项目需求和实际情况进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值