更新记录

1.1.2(2022-11-04) 下载此版本

设置默认选中值bug,通过接口返回添加定时优化

1.1.1(2022-09-29) 下载此版本

1.自定义宽度组件宽度时,修复 优化 进度条 滚动显示问题

1.10(2022-09-29) 下载此版本

新增功能:

  1. defaultKey =>默认tab key选中值
  2. optStyle => 选中的文字样式
  3. optStyleElse=>其他未选中的文字样式 4.tabStyle => 自定义组件样式
查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - -

其他

多语言 暗黑模式 宽屏模式
× ×

wly-tabnav

父组件中说明

文档地址

复制代码<!-- 引入 -->
<wly-tabnav ref="tabnav" :fixed="true" :tabnav="tabnav" @ontype_='ontype'></wly-tabnav>

API

属性名 类型 默认值 说明
defaultKey String '' 默认tab key选中值
lineW Number,String 0 线条宽度
optStyle String 'color: #333333;' 选中的文字样式
optStyleElse String 'color: #999999;' 其他未选中的文字样式
tabStyle String '' 自定义组件样式
lineStyle String '' 自定义进度条样式
fixed Boolean true 是否固定
tabnav Number [{ type: '', //状态值 name: '全部', list: [], //数据 }] 菜单导航

Countdown Events

事件称名 说明 返回值
@ontype_ 点击后出发 当前点击对应的菜单对象
复制代码    this.$refs.tabnav.typefun(0);//当前需要自定义跳转的索引

    // 当前选中的值
    ontype(e){
        console.log(e);//
    }

子组件参数说明

复制代码/** props 参数说明
 * fixed 是否固定窗口
 * tabnav 导航列表
 * */
        props:{
            // 线条宽度
            lineW:{
                type: [Number,String],
                default: 0
            },
            // 线条颜色
            lineStyle:{
                type: [String],
                default: ''
            },
            // 是否固定
            fixed:{
                type: Boolean,
                default: true
            },
            // 菜单导航
            tabnav: {
                type: Array,
                default:[{
                    type: '', //状态值
                    name: '全部',
                    list: [], //数据
                }, {
                    type: '0', //状态值
                    name: '待付款',
                    list: [], //数据
                }, {
                    type: '2', //状态值
                    name: '待收货',
                    list: [], //数据
                }, {
                    type: '3', //状态值
                    name: '已完成',
                    list: [], //数据
                }, {
                    type: '5', //状态值
                    name: '售后',
                    list: [], //数据
                }]
            },
        },

隐私、权限声明

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

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

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

许可协议

MIT协议
ele***@qq.com

2024-06-29

不能用,报错wly-tabnav.vue:90 Uncaught TypeError: Cannot read properties of undefined (reading 'type') at wly-tabnav.vue:90:48

哎还是自己写吧,耽误时间

573***@qq.com

2024-02-29

不能用

无惧

2023-09-15

在切换页面加上功能按钮啥的,应该怎么做?

214***@qq.com

2023-08-01

lineStyle用不上呀,为什么

TcolelAi 2023-09-12

自定义样式,平时css的用法,字符串传入

264***@qq.com

2023-07-27

app端报错 app端报错,Cannot read property 'typefun' of undefined

TcolelAi 2023-09-12

好的,排查

TcolelAi

2023-04-25

246***@qq.com

2023-02-25

父页面拿不到组件回传的值啊

TcolelAi 2023-04-25

使用 这个 事件进行接收 @ontype_

751***@qq.com

2022-11-30

VUE2的 为啥写的支持3

TcolelAi 2023-03-01

确实这样也支持

zabr

2022-07-29

需要的字段太长了怎么办,好像缺少左右滑动的功能,挺好用的

TcolelAi 2022-09-29

后期加上

Pozm

2022-06-21

话说这个组件怎么用,小白请教!!!如何跳转到其他页面

TcolelAi 2022-09-29

已更新使用文档,希望可以帮助你

2023-07-10

看完了广告,也赞赏了,为啥不能下载啊