1.这是一个页面的示例
<view class="search_warp">
<view class="item_box" id="tab2">
<u-section title="软著信息详情" font-size="32" line-color="#EB1E63" :number="receiveNum" :num="true"
:right="false" />
<view class="data_box">
</view>
<u-empty icon-size="500" color="#888888" font-size="28" text="暂无数据"
src="https://www.haoyouqipingtai.com/home/photo/hyq/wechat/noData.png"></u-empty>
</view>
<view class="item_box" id="tab3">
<u-section title="股东信息详情" font-size="32" line-color="#EB1E63" :number="receiveNum" :num="true"
:right="false" />
<view class="data_box">
</view>
<u-empty icon-size="500" color="#888888" font-size="28" text="暂无数据"
src="https://www.haoyouqipingtai.com/home/photo/hyq/wechat/noData.png"></u-empty>
</view>
<view class="item_box" id="tab4">
<u-section title="商标信息详情" font-size="32" line-color="#EB1E63" :number="receiveNum" :num="true"
:right="false" />
<view class="data_box">
</view>
<u-empty icon-size="500" color="#888888" font-size="28" text="暂无数据"
src="https://www.haoyouqipingtai.com/home/photo/hyq/wechat/noData.png"></u-empty>
</view>
</view>
2.tab的样式
<view class="tabs">
<view class="tab" v-for="tab in tabs" :key="tab.id" @click="handleTab(tab)">
{{tab.text}}
</view>
</view>
3.重点(点击跳转事件)
handleTab(tab) {
let targetRef = ""; // 存储目标内容区域的 ref 名称
if (tab.id === 1) {
targetRef = "tab1";
} else if (tab.id === 2) {
targetRef = "tab2";
} else if (tab.id === 3) {
targetRef = "tab3";
} else if (tab.id === 4) {
targetRef = "tab4";
} else if (tab.id === 5) {
targetRef = "tab5";
} else if (tab.id === 6) {
targetRef = "tab6";
} else if (tab.id === 7) {
targetRef = "tab7";
}
console.log(targetRef, "targetRef");
console.log(uni.createSelectorQuery().select(`#${targetRef}`), 22);
if (targetRef) {//确定已经获取到元素 通过类名 或 id绑定元素获取
this.$nextTick(() => {//确定页面元素已经更新
uni.createSelectorQuery().select(`#${targetRef}`).boundingClientRect(res => {
//获取内层元素位置,也就是需要跳转到的元素位置
uni.createSelectorQuery().select('.search_warp').boundingClientRect(data => {
//获取最外层 此处我的是页面,使用时选择自己的外部元素
const scrollTop = res.top - data.top;
uni.pageScrollTo({
scrollTop,//内层元素距离顶部的高度
duration: 300
});
}).exec()
})
.exec();
});
}
},
`