微信小程序设置锚点定位，wx.pageScrollTo-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序设置锚点定位，wx.pageScrollTo。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序中使用 wx.pageScrollTo({)}；进行页面锚点定位，一定要将根目录设置为滑动的根据。

也就是 page 要设置样式为 overflow-y: auto；指定他的高度。
在其中，设置一个容器 home 设置id。
在添加一个内容容器 container 设置类名。
设置多个锚点，添加锚点类型如： node0, node1, node2 等。
然后通过点击事件传递要跳转的锚点信息。

通过wx.createSelectorQuery().select(类名).boundingClientRect(res => {}),，获取锚点中的数据。
在通过wx.createSelectorQuery().select(“#home”).boundingClientRect(res => {}), 获取设置的根(整个滑动的元素)锚点home。
在这里不能直接获取跟元素 page ，只能获取当前组件的根元素，也就是home。
在通过wx.pageScrollTo({ selector: “.container”, scrollTop: 滑动的距离 });就可以滑动到锚点。

看不懂的看代码, (通过 vue3.0 + ts + vite 创建的uni-app 项目)文章来源地址https://www.toymoban.com/news/detail-532596.html

page {
	width: 100%;
    height: 100vh;
    display: block;
    overflow-y: auto;  /* 重点 */
    overflow-x: hidden;
    box-sizing: border-box;
}

<view id="home">
	<view class="container">
		<!-- 内容 锚点点击事件 -->
		<view v-for="(item, index) in data" :key="index" @click="jump(item, index)"></view>
		<!-- 锚点 -->
		<view class="node0"></view>
		<view class="node1"></view>
		<view class="node2"></view>
	</view>
</view>

let data = ["1","2","3","4"],

const jump = (row: any, index: number): void => {
	let className = String('.node' + index);
    uni.createSelectorQuery().select(className).boundingClientRect((con: any) => { // 获取点击要跳转的锚点信息
        uni.createSelectorQuery().select("#home").boundingClientRect((res: any) => { // 获取根元素要滑动的元素
            uni.pageScrollTo({
                selector: "#home",  // 滑动的元素
                // duration: 1500, //过渡时间
                scrollTop: con.top - res.top, //到达距离顶部的top值
            });
        }).exec();
    }).exec();
});