0.1.1 • Published 4 years ago
jmhc-tabbar v0.1.1
介绍
一款基于uniapp的简易tabBar组件
使用方式
引用组件
npm install jmhc-tabbar
import jmhcTabbar from "jmhc-tabbar"
Vue.use(jmhcTabbar)使用组件
<jmhc-tabbar :list='list' :midButton="midButton" :tabbarStyle="tabbarStyle"></jmhc-tabbar>export default {
data() {
return {
midButton:true,
tabbarStyle:{
height:'60px',
boxShadow:' 0 -1px 6px red'
},
list: [
{
hasBadge: false,
pagePath: '/pages/index/index2',
text: 'ss',
iconPath: '../../static/fuwu1.png',
selectedIconPath: '../../static/fuwu2.png'
},
{
hasBadge: true,
pagePath: '/pages/index/index',
text: 'ss',
iconPath: '../../static/fuwu1.png',
selectedIconPath: '../../static/fuwu2.png'
},
]
}
},
}属性说明
| 属性 | 类型 | 默认值 | 说明 | 是否必填 |
|---|---|---|---|---|
| list | Array | tabbar数据数组 | yes | |
| midButton | Boolean | false | 是否突起（仅在list为奇数时有效） | |
| tabbarStyle | Object | tabbar样式（支持css所有样式） | ||
| circleStyle | Object | 凸起圆的样式（如下） | ||
| textStyle | Object | list中文本样式（如下） | ||
| imgStyle | Object | 图片样式（如下） | ||
| badgeStyle | Object | 角标样式（支持css所有样式） |
list属性说明：
| 属性 | 类型 | 值 | 说明 |
|---|---|---|---|
| badge | Number | 如果有角标传入角标的值，没有不写该参数 | |
| pagePath | String | '/pages/index/index2' | 页面路径，必须在 pages .json中先定义 |
| text | String | "ssss" | tab按钮上文字 |
| iconPath | String | '../../static/fuwu1.png' | 图片路径 |
| selectedIconPath | String | '../../static/fuwu2.png' | 选中时图片途径 |
circleStyle属性说明：
| 属性 | 类型 | 值 | 说明 |
|---|---|---|---|
| top | String | '10px' | 相对于tabbar的位置（还包括right,left,bottom,translate等与位置相关的） |
| width | String | ‘50px’ | 凸起圆的宽度（还包括height） |
| boxShadow | String | '0 -1px 6px black' | 突起的阴影 |
textStyle属性说明：
| 属性 | 类型 | 值 | 说明 |
|---|---|---|---|
| color | String | 'black' | 文本颜色 |
| selectedColor | String | ‘green’ | 选中时文本的颜色 |
| fontSize | Number | 16 | 字体大小 |
| paddingTop | Number | 1 | 文字与图片的距离 |
imgStyle属性说明：
| 属性 | 类型 | 值 | 说明 |
|---|---|---|---|
| imgWidth | Number | 21 | 图片宽度 |
| imgHeight | Number | 21 | 图片高度 |
| midWidth | Number | 51 | 突起图片的宽度 |
| midHeight | Number | 51 | 突起图片的高度 |