效果图

实现原理

通过 uni.createSelectorQuery 获取dom节点距离顶部的距离再通过uni.pageScrollTo 滑动页面

HTML

//NAV部分
<view class="" v-for="(item,index) in 数组" :key="index" @click="point(index)"><text>{{item.name}}</text>
</view>
// 内容部分
<view class="newShopCon"><view :class=" 'tab_item'+index " v-for="(item,index) in 数组" :key="index" ><view>这里是内容</view></view>
</view>

JS

methods：{point(index){    //锚点滑动 //要跳转的目标位置的节点uni.createSelectorQuery().select(".tab_item" + index).boundingClientRect(data=>{ //最外层盒子的节点uni.createSelectorQuery().select(".newShopCon").boundingClientRect(res=>{  uni.pageScrollTo({duration: 100,//过渡时间scrollTop:data.top - res.top  ,//到达距离顶部的top值})}).exec()}).exec();},//如果想要获得实时滑动的位置  根据滑动位置改变NAV当前选中高亮onPageScroll(e) {//e.scrollTop 是当前页面滑动距离},}

uni-app 锚点跳转相关推荐

uni app页面跳转后，刷新页面参数丢失问题
正常页面路由跳转地址应该是这样的:http://localhost:8080/#/pages/study/hiring?id=1393112968202870785 浏览器刷新之后就编程这样子:htt ...
uni-app锚点跳转及滚动Tab切换(非scroll-view)
核心代码(记录当前子项距离最外层的高度) uni.createSelectorQuery().select(`#${id}`).boundingClientRect(data => { //目标 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
uni app页面传值
传值是很常见的知识点,刚开始接触uni app总会踩到很多传值的坑,不是这里传不过去,就是那边接收不到,以下是我遇到过的一些传值方式,实在不行,咱就一个一个试,总有一个能"干起". ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
html跳转过度,jq实现锚点跳转过度
jq实现锚点跳转过度 2020年10月29日 | 萬仟网IT编程 | 我要评论 jq实现锚点跳转过渡例子:当我们浏览页面想回到页面顶部时,点击按钮会回到想要去到的锚点.1.数据内容(html) 跳转 ...
html a标签锚点跳转的简单应用
html <a>标签锚点跳转的简单应用 <a>标签的最重要功能是实现超链接和锚点.一般来说通常认为 <a>标签最重要的作用是实现超链接,但是就功能来说还有其他的作用 ...
前端开发周边（js版页内锚点跳转方法）
js版页内锚点跳转方法关键词:focus(获取光标) 使用方法: 1.首先引入 jQuery HTML代码段 <div><h1 id="text1">12 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
微信小程序android错误,app安卓端跳转到微信小程序失败
详细问题描述 (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] app安卓端跳转到 ...

uni-app 锚点跳转

效果图

实现原理

HTML

JS

uni-app 锚点跳转相关推荐

最新文章

热门文章