tabsSwiper 全屏选项卡

该组件内部实现主要依托于uni-appscroll-view和swiper组件，主要特色是切换过程中，tabsSwiper文字的颜色可以渐变，底部滑块可以 跟随式滑动，活动tab滚动居中等。应用场景可以用于需要左右切换页面，比如商城的订单中心(待收货-待付款-待评价-已退货)等应用场景。

uView中，共有2个组件可以实现tabs标签切换，分别是tabs组件，tabsSwiper组件，他们的异同点是：

• tabs组件可以不结合uni-appswiper轮播组件使用，tabsSwiper组件是必须要结uni-appswiper轮播组件才能使用的。
• tabs组件使用更简洁明了(这也是其存在的理由)，tabsSwiper组件配置相对复杂一些。
• tabsSwiper组件相比tabs组件，由于搭配了uni-appswiper轮播组件，获得了滑块跟随，标签颜色渐变等效果(请在演示中扫码查看效果)，而tabs组件是不具备的。

总的来说，二者配置参数和功能都差不多，看用户的需求自行衡量该使用哪一个组件。

注意

此组件目前为uView的vue版本，非nvue版本(制作中)，内部使用uni-appswiper组件为基础，swiper是单页组件， 适合做简单列表左右滑动，因为性能问题，用swiper做复杂长列表，需要较高的优化技巧以及接受一些限制。如果要实现类似腾讯新闻APP首页可以左右 滑动复杂的多个tab切换，不建议使用本组件，如果使用，请自行测试列表很长时的切换流畅度。后续uView会对nvue进行兼容，增强此组件在APP上的能力。
官方有一个nvue新闻模板示例，内有左右滑动tab功能，具体参考：
插件市场新闻模板示例

平台差异说明

基本使用

通过设置is-scroll(默认为true)，配置tabsSwiper组件的内容是否可以左右拖动，一般4个标签以下时，无需拖动，设置为false，5个标签以上，建议可以左右拖动。 具体的标签，通过list参数配置，该参数要求为数组，元素为对象，对象要有name属性，见示例：

说明

is-scroll参数很重要，如果您的tabs项只有几个，且不想tabs导航栏可以被左右滑动的话，请一定要设置is-scroll为false，因为它默认为true。

<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper>
<script>
    export default {
        data() {
            return {
                list: [{
                    name: '待收货'
                }, {
                    name: '待付款'
                }, {
                    name: '待评价'
                }],
            }
        }
    }
</script>

控制组件读取的数组元素属性名

某些情况下，数据可能是从后端获取的，list所需的数组中不一定会有name属性，比如可能为cate_name，如果这种情况还需一定要提供name属性 会导致用户需要循环一遍，把cate_name改成name，显然不人性的，所以uView给tabsSwiper组件提供了一个name参数，您可以设置其值为cate_name，组件内部 会读取数组中的cate_name属性，而不是默认的name属性。

<u-tabs-swiper ref="tabs" name="cate_name" :list="list" :is-scroll="false"></u-tabs-swiper>
<script>
    export default {
        data() {
            return {
                list: [{
                    cate_name: '待收货'
                }, {
                    cate_name: '待付款'
                }, {
                    cate_name: '待评价'
                }],
            }
        }
    }
</script>

控制底部滑块的样式

1. 可以通过active-color控制颜色(同时为当前活动tab文字颜色和滑块的颜色)。
2. bar-width控制滑块的长度(rpx)。
3. bar-height控制滑块高度。

<u-tabs-swiper ref="tabs" :list="list" bar-height="6" bar-width="40" active-color="#2979ff"></u-tabs-swiper>

控制tabsSwiper组件的活动tab样式

1. 通过active-color和inactive-color控制tabsSwiper的激活和非激活颜色。
2. font-size为tabsSwiper文字大小。
3. current为初始化tabsSwiper的激活tab索引，默认为0。gutter为单个tab标签的左右内边距之和，即左右各占gutter的一半。

<u-tabs-swiper ref="tabs" :list="list" active-color="#2979ff" inactive-color="#606266" font-size="30" current="0"></u-tabs-swiper>

使用案例

该组件必须搭配uni-appswiper组件才能使用，可以实现左右滑动，同时还可以搭配uView的loadmore实现底部加载更多的功能，注意：

• 必须要给组件设置ref属性，因为结合uni的swiper组件时需要调用tabsSwiper内部的方法，详见示例。
• 本示例中在swiper-item中嵌套了可选的uni-appscroll-view组件，uni官方不建议在APP-vue和小程序中scroll-view中使用map、video等原生组件，
• 必须将组件的current参数，设置为animationfinish中的返回值。

具体请参考：uni的scroll-view组件文档

注意：由于tabsSwiper组件需要结合uni的swiper组件使用，过程较为复杂，故此示例代码仅作参考使用，请勿直接复制粘贴使用， 具体使用方法请下载查阅uView的tabsSwiper案例。

<template>
    <view>
        <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" @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">
                    ...
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>
<script>
    export default {
        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;
            },
            // scroll-view到底部加载更多
            onreachBottom() {
            }
        }
    };
</script>

API

Props

Events