更新记录

1.1.0（2021-04-30） 下载此版本

增加一些配置

1.0.3（2021-04-30） 下载此版本

优化了一些体验

1.0.2（2021-04-28） 下载此版本

体验优化

平台兼容性

uni-app

注意事项

需在插件市场安装[stylus编译]插件

必看提示

1、如果使用原生下拉刷新，不想tab栏跟着往下走的话，请设置tabFix属性，详情见下面文档属性说明
2、推荐插槽结合scroll-view使用，使用scroll-view里的下拉刷新
3、请设置任意一个插槽slot的高度，避免当某个插槽为空时手指滑动捕捉不到
4、小程序插件，app-vue应该也没问题，其他端请自行测试
5、此插件内置滑动内容切换，比swiper性能强很多

template

<view class="content">
    <tab 
        v-model="activeKey" 
        :navData="scrollData"
        @change="tabChange"
        @tabClick="tabClick"
    >
        <!-- 
        <scroll-view scroll-y slot="slot-1" style="overflow:auto;height:300rpx">
            1
        </scroll-view>
        <scroll-view scroll-y slot="slot-2" style="overflow:auto;height:300rpx">
            2
        </scroll-view>
        -->
        <!-- AND -->
        <view :slot="item.slot" v-for="(item,key) in scrollData" :key="key">
            <scroll-view scroll-y height="400rpx">
                第{{key+1}}页
            </scroll-view>
        </view>
    </tab>
</view>

script

import tab from '@/components/Mark-Tab/Tab.vue';
export default {
    data() {
        return {
            activeKey:0,
            scrollData:[
                {
                    label:'第一页',
                    slot:'slot-1'
                },
                {
                    label:'第2页',
                    slot:'slot-2'
                },
                {
                    label:'第3页',
                    slot:'slot-3'
                },
                {
                    label:'第4页',
                    slot:'slot-4'
                },
                {
                    label:'第5页',
                    slot:'slot-5'
                },
                {
                    label:'第6页',
                    slot:'slot-6'
                },
                {
                    label:'第7页',
                    slot:'slot-7'
                },
                {
                    label:'第8页',
                    slot:'slot-8'
                }
            ]
        }
    },
    components:{tab},
    methods: {
        tabChange(e){
            console.log(e);
        },
        tabClick(e){
            console.log(e);
        }
    }
}

Attributes

Events