uniapp 点击导航，对应内容滑动到指定位置

<template>
    <view>
        <view class="nav_bt">
            <view v-for="(item,index) in navArry" :key="index" :class="currenNav==index?'navStyle':''" @click="navClick(index)">{{item}}</view>
            
        </view>
        <view class="main" id="main">
            <view v-for="(item,index) in mainArry" :key="index" :class="'box'+index">
                <image :src="'../../static/images/lizi/tupian'+(item+1)+'.jpg'" mode="widthFix"></image>
                <view>{{index+1}}</view>
            </view>
            <view style="width: 100%;height: 1000rpx;background: #007AFF;"></view>
        </view>
    </view>
</template>
<script>
    var scroll_top=0;
    export default {
        data() {
            return {
                currenNav:0,
                navArry:['一','二','三','四','五','六'],
                mainArry:6,
            }
        },
        onPageScroll(e) {
            scroll_top=e.scrollTop
        },
        methods: {
            navClick:function(index){
                this.currenNav=index;
                const query = uni.createSelectorQuery().in(this);
                query.select('.box'+index).boundingClientRect(data => {
                    uni.pageScrollTo({
                        scrollTop: data.top+scroll_top,
                        duration: 300
                    });
                }).exec();
                
            }
        }
    }
</script>

<style>
    page{position: relative;}
    .nav_bt{display: flex;flex-direction: row;align-items: center;justify-content: space-around;position: fixed;top: 0;left: 0;width: 100%;height: 80rpx;z-index: 10;}
    .nav_bt view{width: 80rpx;height: 80rpx;background: #666;text-align: center;line-height: 80rpx;color: #fff;}
    .nav_bt view.navStyle{background: #C8C7CC;color: #000000;}
    .main{padding-top: 100rpx;}
    .main>view{position: relative;}
    .main image{width: 100%;}
    .main>view view{width: 100%;height: 100%;background: rgba(0,0,0,0.5);position: absolute;top: 0;left: 0;font-size: 100rpx;color: #fff;display: flex;align-items: center;justify-content: center;}
</style>