uniapp,小程序tab切换锚点跳转滚动至相应位置

510 阅读1分钟

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();
					});
				}
			},

`