更新记录

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协议

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