效果图

在这里插入图片描述

实现原理

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐