<template>
    <view class="content">
        <view class="content-div">
            <view>
                <u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
            </view>
            <swiper :current="swiperCurrent" @transition="transition" style="height: 100%;" @animationfinish="animationfinish">
                <swiper-item class="swiper-item">
                    <scroll-view scroll-y style="height: 100%; width: 100%;">
                        <view class="swiper-div">                           
                        
                        </view>
                    </scroll-view>
                </swiper-item>
                <swiper-item class="swiper-item">
                    <scroll-view scroll-y style="height: 100%; width: 100%;">
                        <view class="swiper-div" >
                            
                        </view>
                    </scroll-view>
                </swiper-item>
                <swiper-item class="swiper-item">
                    <scroll-view scroll-y style="height: 100%; width: 100%;">
                        <view class="swiper-div">
                            
                        </view>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>

    </view>
</template>

data() {
            return {
                list: [{
                    name: '月排行榜'
                }, {
                    name: '季排行榜'
                }, {
                    name: '年排行榜'
                }],
                // 因為內部的滑動機制限制，請將tabs組件和swiper組件的current用不同變量賦值
                current: 0, // tabs組件的current值，表示當前活動的tab選項
                swiperCurrent: 0, // swiper組件的current值，表示當前那個swiper-item是活動的

            }
        },
        methods: {
            // tabs通知swiper切換
            tabsChange(index) {
                this.swiperCurrent = index;

            },
            // swiper-item左右移動，通知tabs的滑塊跟隨移動
            transition(e) {

                let dx = e.detail.dx;
                this.$refs.uTabs.setDx(dx);
            },
            // 由于swiper的內部機制問題，快速切換swiper不會觸發dx的連續變化，需要在結束時重置狀態
            // swiper滑動結束，分別設置tabs和swiper的狀態
            animationfinish(e) {
                let current = e.detail.current;
                this.$refs.uTabs.setFinishCurrent(current);
                this.swiperCurrent = current;
                this.current = current;
            },
        }
    }
</script>

<style scoped lang="scss">
    .content {
        width: 100%;
        height: 100%;
    }

    .content-div {
        width: 100%;
        height: 100%;
    }
    .swiper-div {
        display: flex;
        width: 100%;
        margin-bottom: 5rpx;
    }
</style>

image.png