微信小程序点击滚动到指定位置的实现

参考链接：blog.csdn.net/weixin_4361…

效果图：

HTML:

<template>
    <!-- 导航栏 -->
    <view class="search-back" :style="{opacity:styleOpacity}" v-show="being">
            <view :style=" 'height:' + S_top + 'px;' "></view>
            <view class="search-input" :style="['height:' + S_height + 'px;','padding-right:' + S_width + 'px;']">
                    <view class="tab-jiantou" @click="goTo">
                            <image src="/static/detail/video-fanhui.svg" mode="widthFix"></image>
                    </view>
                    <view class="tab-view" v-for="(item,index) in tab_name" :key="index"
                    :style=" 'height:' + S_height + 'px;' "
                    @click="swItch(index)"
                    >
                            <text>{{item}}</text>
                            <text :class="{active : index == trigger}"></text>
                    </view>
            </view>
    </view>
    <!-- 轮播 -->
    <Swipers id="select" class="swiper" :goods="goods" :seckill="seckill"/>
    <!-- 评价 -->
    <Eva id="select" class="eva" :eav_num="eav_num" :eav_data="eav_data"/>
    <!-- 详情 -->
    <Img id="select" class="img" :goods_details="goods.goods_details"/>
</template>

js

function swItch(index){
        const cls = index == 0 ? '.swiper' : index == 1 ? '.eva' : '.img'
        const query = wx.createSelectorQuery()
        query.select(cls).boundingClientRect()
        query.selectViewport().scrollOffset()
        query.exec(res=>{
                wx.pageScrollTo({
                  scrollTop: res[0].top + res[1].scrollTop - search_data.Custom_height, //减去导航栏的高度,否则会不准确
                  duration: 300
                })
                setTimeout(()=>{search_data.trigger = index},500)
        })
}