更新记录

1.0.2(2023-06-08) 下载此版本

增加预览二维码

1.0.1(2023-05-31) 下载此版本

增加license

1.0.0(2023-05-25) 下载此版本

初始化发布

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

liu-tabs适用于uni-app项目的tabs选项卡、滑动选项卡组件

本组件目前兼容微信小程序、H5

本组件是仿京东tabs选项卡、滑动选项卡组件,滑动动画效果 自动宽度,结合swiper使用,自动定位到对应内容,可自定义tab样式

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

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

使用示例

<template>
    <view class="tab-box">
        <liu-tabs :tabList="tabList" @change="change"></liu-tabs>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                tabList: [{
                    id: 1,
                    name: '热门推荐'
                }, {
                    id: 2,
                    name: '品牌推荐'
                }, {
                    id: 3,
                    name: '热门分类'
                }, {
                    id: 4,
                    name: '家居家纺'
                }, {
                    id: 5,
                    name: '家居建材'
                }, {
                    id: 6,
                    name: '餐厨水具'
                }, {
                    id: 7,
                    name: '家用电器'
                }, {
                    id: 8,
                    name: '数码手配'
                }]
            };
        },
        methods: {
            change(e) {
                console.log('当前点击菜单信息:', e)
            }
        }
    };
</script>

<style lang="scss" scoped>
    .tab-box {
        width: 100%;
        height: 100vh;
        background-color: #f0f0f0;
    }
</style>

属性说明

名称 类型 默认值 描述
tabList Array [] 菜单数据源
width String 100% 菜单栏宽度(rpx、px、%)
height Number 88 菜单栏高度(rpx)
top Number 0 菜单栏距顶部距离(rpx)
bgColor String #FFFFFF 菜单栏背景色
themeColor String #FD430E 主题色
@change Function 点击菜单回调事件

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

1、本插件可免费下载使用;

2、未经许可,严禁复制本插件派生同类插件上传插件市场;

3、未经许可,严禁在插件市场恶意复制抄袭本插件进行违规获利;

4、对本软件的任何使用都必须遵守这些条款,违反这些条款的个人或组织将面临法律追究。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问