uniapp小程序点击标题或者导航自动滑动相对应的数据

最新推荐文章于 2024-05-09 16:29:33 发布
最新推荐文章于 2024-05-09 16:29:33 发布
阅读量900 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mo3408/article/details/112367963
版权
本文介绍了在uniApp小程序中如何实现点击标题后，页面的scroll-view自动滑动到相应数据的位置。通过代码示例展示了具体实现方法，并提醒需设置scroll-view的高度。
摘要由CSDN通过智能技术生成

1.实现的效果如下：

代码如下：

	<view class="grid margin-bottom text-center col-5" style="border-bottom:2px solid #fafafa;padding-bottom:20rpx;">
				<view class="list-text" v-for="(item,index) in navList" :id="index" :class="index==navActive?'active':'wei'"  :key="index" @tap='jumpTo' :data-index="index" :data-opt='"dist"+index'>{
  {item}}</view>
			</view>

			<scroll-view :scroll-into-view="toView" scroll-y
了解本专栏 订阅专栏 解锁全文 超级会员免费看
瑆箫
关注
专栏目录
订阅专栏
swiper.js手机触屏滑动选项卡标签切换代码.zip
07-05
swiper.js手机触屏滑动选项卡标签切换代码一款基于swiper.js实现的自定义tab选项卡标签切换的手机触屏滑动选项卡切换代码，左右平滑动画滚动切换效果。
uniapp-小程序锚点定位
wendyNo的博客
04-26 978
<!--顶部标签，点击这里的每一个标签，内容部分自动滑动到对应的地方--> <view class="performance-type-lists"> <view :class="type_id==1?'active':''" data-type_id=1 @tap="togglePosition" data-classname="performance-important-tips"> <view>简介</view> <view
uniapp微信小程序实现菜单左右联动效果
最新发布
qq_35410565的博客
05-09 1319
仿点餐小程序，点餐页面实现左右菜单互联效果
uni实现路过导航导航固定到顶部点击导航栏内容滚动到本页面对应位置
qwe19991123的博客
12-02 573
我导航是图片 <view class="navWrap" ref="nav"> <view class="nav"> <image @click="navTitle(1)" class="eduImg" src="../../static/1212/eduImg.png" mode=""></image> <image @click="navTitle(2)" class="firstOrderTitleIm
uni-app开发小程序，利用scroll-view实现自动滚动至对应数据
AAAXiaoApple的博客
11-23 564
uni-app开发小程序，利用scroll-view实现自动滚动至对应数据
scroll-view在小程序页面里实现滚动，uniapp项目
Frank_colo的博客
01-13 924
要实现红框中的区域进行滚动。
uni app 使用分段器之后如何动态自定义导航栏标题
渐离的博客
04-27 2193
1.在官网引用分段器 详细地址 https://ext.dcloud.net.cn/plugin?id=54 看会就明白 //分段器使用 <uni-segmented-control :current="current" :values="items.map(i=>i.title)" @clickItem="onClickItem" style-type="text" activ...
uni-app 导航栏按钮点击事件，动态修改导航栏的文字,标题文字
m0_49578914的博客
05-28 3942
文档中的方法： onNavigationBarButtonTap(e) { console.log(e) } onNavigationBarButtonTap这个方法要和onnLoad同级
微信小程序swiper实现滑动放大缩小效果
10-17
在微信小程序中实现滑动放大缩小效果主要依赖于swiper组件，这是微信小程序中一个用于轮播展示图片或者其他内容的组件。通过合理配置swiper组件的属性和绑定事件，可以实现用户在滑动时图片放大缩小的交互效果。 ...
纯CSS3实现手机APP滑动菜单动画特效源码.zip
07-04
本源码是一款非常有创意的纯CSS3导航菜单特效的代码。该导航菜单主要通过CSS3 transform和transition方法实现效果，非常简单。该特效由進擊的燊提供。本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗，不支持IE8及以下浏览器。有兴趣的朋友们可以来下载试试吧。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。希望大家可以喜欢！
vue.js点餐app手机触屏滑动分类菜单切换代码
01-08
vue.js点餐智能点餐app手机触屏滑动分类菜单切换代码，代码简单，修改方便！分享给大家，样式效果大家一定是需要的
Android项目源码简单导航页欢迎页侧滑demo.zip
07-10
注意：本项目使用android studio开发，eclipse可能无法直接导入。 本项目App包含 1、轮播焦点图; 2、欢迎页和导航页的设置; 3、接口的一些使用; 4、解决listView图片错乱和缓存问题; 5、官方侧滑的使用
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
m0_67266787的博客
02-24 792
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
uniapp 点击标题之后 标题更换
爬楼梯的前端小白的博客
07-14 303
<view class="delica-list delica-grow" @click="multiple()"> <text>{{synthesize}}</text> <image src="/static/paixv.png"></image> </view> v-if 属性是否隐藏 :class="{activeb: item.name == synthesize} 动态绑定属性 给activeb设置样...
uniapp详情页滚动显示标题
qq_45193707的博客
08-10 492
uniapp详情页滚动显示标题 “titleNView”: { “type”: “transparent” } "pages": [{ "path": "pages/news/index", "style": {} }, { "path": "pages/news/detail", "style": { "app-plus": { "titleNView": { "type": "tr
uniapp 按钮在右上角（与标题一起）如何触发
努力搬砖的小码
05-06 481
uniapp 按钮在右上角（与标题一起）如何触发
【uni-app&小程序】状态栏和标题栏
joanmelon的博客
01-04 7096
Hi，我是宾果的救星~
uniapp 实现切换选项卡跳到对应的锚点位置
qq_43467284的博客
04-15 579
uniapp 实现选项卡跳到对应锚点位置，类似h5 单页面a链接导航效果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

瑆箫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值