uni-app 锚点跳转

前端小吕

于 2021-07-08 14:27:08 发布

阅读量2.7k

点赞数 2

文章标签： uni-app vue 锚点

本文链接：https://blog.csdn.net/weixin_49230250/article/details/118572447

版权

效果图

在这里插入图片描述

实现原理

通过 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 是当前页面滑动距离
	},
	
}