<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