微信小程序滚动监听实现联动效果

效果图：

想要实现的效果：滚动条向下滚动到一定距离的时候，导航栏才渐渐出来；滚动条滚动到相应的内容块上时，tab滑到对应的位置上。

需要用到两个api：1、onPageScroll 和 2、wx.createSelectorQuery()

<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>

获取轮播，评价，详情每个组件的高度

let heightset = reactive({hei:[]})
function viewheight(){
        const query = wx.createSelectorQuery()
        query.selectAll('#select').boundingClientRect()
        query.exec(res=>{
                heightset.hei.push(res[0][0].height - search_data.Custom_height) //轮播图要减去导航栏的高度
                heightset.hei.push(heightset.hei[0] + res[0][1].height + 20)
                heightset.hei.push(heightset.hei[1] + res[0][2].height + 20)
        })
}

import {onLoad,onShareAppMessage,onPageScroll} from '@dcloudio/uni-app'
// 滚动监听
onPageScroll((e)=>{
        search_data.styleOpacity = e.scrollTop / 300
        search_data.being = e.scrollTop === 0 ? false : true
        let scrollTop = e.scrollTop
        if(scrollTop >= heightset.hei[search_data.trigger]){
                // 上拉
                search_data.trigger += 1
        }else if(scrollTop < heightset.hei[search_data.trigger - 1]){
                // 下拉
                search_data.trigger -= 1
        }
})