更新记录

1.0.5（2023-06-15） 下载此版本

增加预览二维码

1.0.4（2023-04-14） 下载此版本

增加示例

1.0.3（2023-03-31） 下载此版本

新增是否禁用参数

平台兼容性

liu-custom-tab适用于uni-app项目的高度自定义多级滚动tabbar

本组件兼容小程序、H5,app

介绍：高度自定义多级滚动tabbar，带动画效果，自适应各种布局，支持各种自定义，同时本组件灵活度高，可自由diy，结构简单，注释清晰，非常适合新手学习

--- 扫码预览、关注我们 ---

扫码关注公众号，查看更多插件信息，预览插件效果！

使用示例

<template>
    <view class="page-main">
        <button @click="push">添加数据</button>
        <view style="width: 100%;">
            <liu-custom-tab :tabList='tabList' :checkArr='checkArr' @update-checkArr="updateParentCheckArr" />
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                tabList: [{
                    title: '请选择所在省',
                    id: 0
                }, {
                    title: '请选择所在市',
                    id: 1
                }, {
                    title: '请选择所在区县',
                    id: 2
                }, {
                    title: '请选择所在乡镇',
                    id: 3
                }, {
                    title: '请选择所在村',
                    id: 4
                }],
                checkArr: ["甘肃省", "兰州市", "城关区", "二龙湖", "测试地址"],
            }
        },
        methods: {
            //数据源，为了避免数据冗余，请使用checkArr的状态来处理数据响应
            updateParentCheckArr(e) {
                this.checkArr = e
                console.log('已经选中的数据回调信息：', e)
            },
            push() {
                if (this.checkArr.length == this.tabList.length) return
                this.checkArr.push('三马路派出所' + (this.checkArr.length + 1))
            }
        }
    }
</script>

属性说明