tabsSwiper 全屏選項卡（uniapp-uView）

完整代碼

<template>
    <view>
        <u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
            swiperWidth="750" gutter="150"></u-tabs-swiper>
        <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
            <swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
                <scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
                    {{item.name}}
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                    name: '我沒'
                }, {
                    name: '談完'
                }, {
                    name: '的'
                },{
                    name: '那場'
                },{
                    name: '戀愛'
                }],
                tabs: [{
                    name: '我沒'
                }, {
                    name: '談完'
                }, {
                    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>
</style>

效果