uni-app 开发 tab锚点 （水一篇）

<template>
    <view class="tabsWrap">
        <view class="tabsBox">
            <view class="tabs" :style="{
                top: tabsTop + 'px'
            }">
                <view v-for="(tab, index) in tabs" :key="index" class="tab" :class="{ active: currentTab === index }"
                    @click="switchTab(index)">
                    {{ tab }}
                </view>
            </view>
            <view class="list" :style="{
                marginTop: tabHeight + 'px'
            }">
                <view class="item" style="background-color: aqua;">
                    第一个tab的内容
                </view>
                <view class="item" style="background-color: rgb(141, 106, 106);">
                    第二个tab的内容
                </view>
                <view class="item" style="background-color: blueviolet;">
                    第三个tab的内容
                </view>
            </view>
        </view>

    </view>
</template>
  
<script>
export default {
    data() {
        return {
            tabs: ['第一个tab', '第二个tab', '第三个tab'],
            currentTab: 0, // 当前选中的tab
            tabHeight: 0, // tab的高度
            scrollTop: 0, // 页面滚动的距离
            scrollTimer: null,
            listMarginTop: 0,
            sectionHeights: [0],
            tabsTop: 0
        };
    },
    onReady() {
        this.getTabHeight()
        this.getSectionHeights()
    },
    onLoad(options) {
        console.log(options, 'onload')
        this.scrollToTabTop()
    },
    onPageScroll(e) {
        if (this.scrollTimer) {
            clearTimeout(this.scrollTimer)
        }
        this.scrollTimer = setTimeout(() => {
            console.log(e, 'sss')
            this.scrollTop = e.scrollTop;
            let currentTab = 0
            this.getSectionHeights()
            let sectionHeights = this.sectionHeights
            let len = this.sectionHeights.length
            console.log(sectionHeights, 'scroll', this.scrollTop)
            for (let i = 0; i < len - 1; i++) {
                if (this.scrollTop >= sectionHeights[i] && this.scrollTop < sectionHeights[i + 1]) {
                    currentTab = i
                    break
                }
            }
            this.currentTab = currentTab;
        }, 300)
    },
    methods: {
        async getTabHeight() {
            let rect = await new Promise(resolve => {
                // 获取tab距离顶部的距离和tab的高度
                uni.createSelectorQuery()
                    .in(this)
                    .select('.tabs')
                    .boundingClientRect((rect) => {
                        resolve(rect)
                    })
                    .exec();
            })
            // #ifdef APP-PLUS
            this.tabsTop = 0
            // #endif

            // #ifdef H5
            this.tabsTop = this.appNavHeight
            // #endif
            this.tabHeight = rect.height;
        },
        async getSectionHeights() {
            let sections = []
            let sectionHeights = [0]
            let rect = await new Promise(resolve => {
                const query = uni.createSelectorQuery().in(this);
                query.selectAll('.item')
                    .boundingClientRect((res) => {
                        resolve(res)
                    })
                    .exec();
            })
            sections = rect
            console.log('getSections异步', sections)
            for (let i = 0; i < sections.length; i++) {
                sectionHeights.push(sectionHeights[i] + sections[i].height)
            }
            this.sectionHeights = sectionHeights
        },
        switchTab(index) {
            this.currentTab = index;
            console.log(this.currentTab, this.sectionHeights, this.sectionHeights[this.currentTab])
            this.$nextTick(() => {
                uni.pageScrollTo({
                    scrollTop: this.sectionHeights[this.currentTab],
                    duration: 200,
                });
            });
        },
    }
};
</script>
  
<style lang="scss" scoped>
.tabsWrap {
    box-sizing: border-box;

    .tabsBox {
        position: relative;

        .tabs {
            position: fixed;
            left: 0;
            width: 100%;
            height: 100rpx;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #fff;
            z-index: 999;
            border-bottom: 2rpx solid #ccc;
        }

        .tab {
            font-size: 32rpx;
            color: #333;
            cursor: pointer;
        }

        .tab.active {
            color: #f00;
        }

        .list {
            overflow-y: scroll;

            .item {
                height: 1000px;
                background-color: #eee;
            }
        }


    }
}
</style>