uniapp 锚点跳转

uniapp yekong 309℃

html

<div class="daohang" :class="{ flex: topx < top }">
            <div class="leftr" @click="leftx"><uni-icons type="arrowleft" size="20"></uni-icons></div>
            <div class="center"><v-tabs lineHeight="0" v-model="current2" :tabs="tabs" @change="changeTab"></v-tabs></div>
            <div class="rightx" @click="rightx"><uni-icons type="arrowright" size="20"></uni-icons></div>
        </div>
        <div v-for="(item, index) in tabs" :key="index">
            <div class="titlex2" :ref="'tab_item' + index" :id="'gmxz' + index">
                <div class="left">
                    <div class="left1"></div>
                    {{ item }}
                </div>
            </div>
            <div class="tuwen"><image src="../../static/tuwen.jpg" mode="widthFix"></image></div>
            <div class="line2"></div>
        </div>

script

changeTab(index) {
            console.log('当前选中的项:' + index);
            this.active0 = 2;
            uni.createSelectorQuery()
                .select('#gmxz' + index)
                .boundingClientRect(data => {
                    //目标位置的节点:类或者id
                    uni.createSelectorQuery()
                        .select('.content')
                        .boundingClientRect(res => {
                            //最外层盒子的节点:类或者id
                            uni.pageScrollTo({
                                duration: 100, //过渡时间
                                scrollTop: data.top - res.top - 80 //到达距离顶部的top值
                            });
                        })
                        .exec();
                })
                .exec();
            // uni.pageScrollTo({
            //  scrollTop: this.$refs['tab_item' + index].$el.offsetTop,
            //  duration: 100
            // });
        },
        
喜欢 (0)