微信小程序设置锚点定位，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: 滑动的距离 });就可以滑动到锚点。
vue2+vant. uniapp 项目
<template><view class="data_center"><van-tabsclass="my_data_center_tab":active="activeTab"color="#fff"title-inactive-color="#fff"title-active-color="#fff"@change="onChangeActiveTab"><van-tabv-for="item in dataCenterTabList":key="item.name":title="item.title":name="item.name"></van-tab></van-tabs><view class="top_bg"></view><view id="home"><view class="node0">1111</view><view class="node1">2222<view class="node2">3333</view></view></view>
</template><script>export default {components: {},data() {return {activeTab: 1,dataCenterTabList: [{name: 1,title: "1111",},{name: 2,title: "2222",},{name: 3,title: "3333",},],};},mounted() {},methods: {onChangeActiveTab(event) {// console.log(event);this.activeTab = event.name;let className = `.node${event.index}`;console.log("className===", className);uni.createSelectorQuery().select(className).boundingClientRect((con) => {// console.log(con);// 获取点击要跳转的锚点信息uni.createSelectorQuery().select("#home").boundingClientRect((res) => {// console.log(res);console.log(con.top - res.top);// 获取根元素要滑动的元素uni.pageScrollTo({selector: "#home", // 滑动的元素// duration: 1500, // 过渡时间scrollTop: con.top - res.top + 12, // 到达距离顶部的top值});}).exec();}).exec();},},
};
</script><style lang="scss" scoped>
page {width: 100%;height: 100vh;display: block;overflow-x: hidden;box-sizing: border-box;background: #f7f8fa;
}
.data_center {.my_data_center_tab {background: #005dff;position: fixed;left: 0;top: 0;right: 0;}#home {padding: 0 32rpx;overflow-y: auto; /* 重点 */margin-top: 120rpx;}.top_bg {width: 100vw;height: 136rpx;background: #005dff;position: fixed;top: 44px;left: 0;z-index: -1;}
}/deep/ .van-tabs__scroll {background: transparent;
}
</style>
