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

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

  1. html代码部分 重点是给元素加入【 :id="'item' + item.id"】
html 复制代码
 <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代码部分

javascript 复制代码
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)
}
相关推荐
吴传逞1 小时前
记一次uniapp+nutui-uniapp搭建项目
uni-app
烛阴1 小时前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
雪芽蓝域zzs3 小时前
uni-app倒计时公共组件 封装,倒计时组件
uni-app
拜无忧5 小时前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
冰冷的bin6 小时前
【React Native】点赞特效动画组件FlowLikeView
react native·react.js·typescript
2501_915918416 小时前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520866 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾7 小时前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序
Bug生产工厂11 小时前
React支付组件设计与封装:从基础组件到企业级解决方案
前端·react.js·typescript
清风细雨_林木木11 小时前
uni-app 和 uni-app x 的区别
uni-app