uni-app实现锚点链接

uni-app实现锚点链接

// 锚点链接
		anchorLink(targetDom) {
			uni.createSelectorQuery()
				.select(targetDom)
				.boundingClientRect(data => {
					//目标位置节点 类或者 id
					uni.createSelectorQuery()
						.select('.proContent')
						.boundingClientRect(res => {
							//最外层盒子节点类或者 id
							uni.pageScrollTo({
								duration: 200, //过渡时间
								scrollTop: data.top - res.top //到达距离顶部的top值
							});
						})
						.exec();
				})
				.exec();
		}

<view class="navList">
					<view
						:class="'navItem ' + (navActive == index ? 'navActive' : '')"
						v-for="(item, index) in navList"
						:key="index"
						@click="anchorLink(item.targetDom), (navActive = index)"
					>
						{{ item.name }}
					</view>
				</view>

data数据：

			navList: [{ name: '商品', targetDom: '.proPicPrice' }, { name: '详情', targetDom: '.productDetails' }, { name: '推荐', targetDom: '.recommend' }],