更新记录

1.0.1(2020-04-18) 下载此版本

新增 示例项目


平台兼容性

uni-app-component-HansTabbar

uniapp小程序自定义tabbar组件

使用方法

在script中引入组件

复制代码import hansTabber from '../../components/hans-tabbar/hans-tabbar.vue'
components:{
            hansTabber
        },
        data() {
            return {
                list: [{
                     "text": "未录入",
                     "iconPath": '../../static/enter.png' ,
                     "selectedIconPath": '../../static/enter-select.png'
                   },
                   {
                     "text": "作业互评",
                     "iconPath": '../../static/correct.png',
                     "selectedIconPath":'../../static/correct-select.png'
                     },
                     {
                       "text": "成绩分析",
                       "iconPath": '../../static/analyse.png',
                       "selectedIconPath": '../../static/analyse-select.png'
                     }],
            }
        },
        methods: {
            tabChange(index) {
                console.log(index)
            }
        }

在 template 中使用组件

复制代码<hans-tabber :list="list" style="position:fixed;bottom:0;width:100%;left:0;right:0;" @tabChange="tabChange"></hans-tabber>

属性说明

属性名 类型 必填 说明
list Array text为tabbar显示名称;iconPath:默认显示icon地址;selectedIconPath:选中状态icon地址

事件说明

事件名称 说明 返回
tabChange 点击tabbar的事件 当前点击的index

隐私、权限声明

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

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

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

许可协议

MIT协议
qzb***@163.com

2024-09-25

下载下来全是bug

mis***@126.com

2022-11-14

178***@qq.com

2022-05-11

确实有一些问题 跳转链接没做以及默认选中的index,这些还需要使用的时候在进行修改一下,不过还是不错了,点赞

233***@qq.com

2021-09-10

跳转的时候乱跳,和页面路径对不上,那个颜色也不亮

162***@qq.com

2021-09-06

作者建议你不要用index来判断是否选中 最好用tabbar数组中的text来判断

139***@qq.com

2021-08-14

bug一大堆

轻航

2021-08-11

这玩意也能叫tabbar???

1y

2021-07-12

问一下大佬,我使用v-show显示隐藏的话,也是可以的吧

974***@qq.com

2021-04-09

还在问怎么跳转的是否有点

我说晚安99

2021-03-31

这个怎么跳转啊 有没有相关示例啊

2023-06-28

微信小程序下,无法显示;看到wxml page > view > hans-tabbar ;感觉并没有解析出来