标签：uniapp 选项卡 name tabs uView current dx 组件 swiper

完整代码

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。