uni-app----微信小程序錨點定位 、自動吸頂、滾動自動選擇對應的錨點（點擊tab跳轉對應的元素位置）

1. 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>
        <view
            class="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].id
        const 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 = index
    pageScroll(index)
}

文章來源地址http://www.zghlxwxcb.cn/news/detail-831811.html

到了這里，關于uni-app+ts----微信小程序錨點定位 、自動吸頂、滾動自動選擇對應的錨點（點擊tab跳轉對應的元素位置）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！