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>

效果

标签：uniapp,选项卡,name,tabs,uView,current,dx,组件,swiper
来源： https://www.cnblogs.com/zhangying0518/p/15097553.html