uni-app+ts----微信小程序锚点定位、自动吸顶、滚动自动选择对应的锚点（点击tab跳转对应的元素位置）

本文主要是介绍uni-app+ts----微信小程序锚点定位、自动吸顶、滚动自动选择对应的锚点（点击tab跳转对应的元素位置），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

uni-app----微信小程序锚点定位、自动吸顶、滚动自动选择对应的锚点（点击tab跳转对应的元素位置）

html代码部分重点是给元素加入【 :id=“‘item’ + item.id”】

 <view class="radiusz bg-white pt-[30rpx] z-[999]"><u-tabs:list="list":current="current"@change="tabChange"bg-color="transparent":active-color="mainColor":bar-width="90"font-size="24":gutter="26"></u-tabs></view><viewclass="px-[20rpx] py-[20rpx] w-full bg-white mb-[30rpx] box-border"v-for="item in list":key="item.id"><view class="text-center" :id="'item' + item.id"><text class="pr-[10rpx]">———</text>{{ item.name}}<text class="pl-[10rpx]">———</text></view><view class="mt-[40rpx]"><u-parse :html="item.content"></u-parse></view><view class="mt-[40rpx]"><apply-btn :customClass="customClass" btnText="加盟申请"></apply-btn></view></view>

2.JS代码部分

import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() as any
const customClass = ref('m-auto') //按钮样式
const current = ref(0) // tab默认索引/*** @description: 滚动到对应的位置 uni-app锚点定位 、自动吸顶、滚动自动选择对应的锚点* @param {*} index：tab选中的索引* @return {*}*/
const pageScroll = (index: number) => {nextTick(() => {const id = list.value[index].idconst query = proxy.createSelectorQuery()query.select('#item' + id).boundingClientRect((data: Record<string, any>) => {const query1 = proxy.createSelectorQuery() //需要定义一个新的query1.select('.boxz').boundingClientRect((res: Record<string, any>) => {const scrollTop = data.top - res.top // 获取差值const skewY = 80 // 偏移高度// 页面开始进行滚动到目标位置uni.pageScrollTo({scrollTop: scrollTop > 0 ? scrollTop - skewY : scrollTop + skewY,duration: 300,complete: function () {console.log('滚动完成')}})}).exec()}).exec()})
}/*** @description: 点击tab选项* @param {*} index ：选中的索引* @return {*}*/
const tabChange = (index: number) => {current.value = indexpageScroll(index)
}