jmhc-tabbar

介绍

一款基于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	突起图片的高度