0.0.9 • Published 5 years ago
mpvue-tab v0.0.9
mpvue自定义微信小程序tabbar
- 可以给tabBar添加双击事件
- 可以给tabBar添加长按事件
- 在子页面定义tabBar
效果演示
使用文档
- 安装
npm i mpvue-tab- mpvue项目中使用
<template>
<div class="container">
<!-- <component :is="currentTabComponent"></component> -->
<!-- 通过v-if切换页面 -->
<home v-if="currentPage===0" />
<job v-if="currentPage===1" />
<me v-if="currentPage===2" />
<mpvue-tabbar
:list="list"
position="bottom"
fontSize="30rpx"
color="#606266"
selectedColor="#3794ff"
:index = "currentPage"
@switchTab="onSwitchTab"
@doubleClick="onDoubleClick"
@longpress="onLongPress"
/>
</div>
</template>
<script>
import me from '@/pages/me/index'
import home from '@/pages/home/index'
import job from '@/pages/job/index'
import mpvueTabbar from 'mpvue-tabbar'
export default {
data () {
return {
currentPage: 2,
list: [{
text: '首页',
iconPath: '/static/home.png',
selectedIconPath: '/static/homeSelected.png',
navigationBarTitle: '首页',
navigationBarFrontColor: '#ffffff',
navigationBarBackgroundColor: '#000000',
dot: true,
dotColor: '#3794ff',
badgeText: 1
}, {
text: '岗位',
iconPath: '/static/job.png',
selectedIconPath: '/static/jobSelected.png'
}, {
text: '我的',
iconPath: '/static/me.png',
selectedIconPath: '/static/meSelected.png',
navigationBarTitle: '我的'
}]
}
},
components: {
mpvueTabbar,
job,
home,
me
},
methods: {
// 切换tab
onSwitchTab (pageIndex) {
this.currentPage = pageIndex
console.log('切换tab', pageIndex)
wx.showToast({
title: '切换tab'
})
},
// 双击事件
onDoubleClick (pageIndex) {
this.currentPage = pageIndex
console.log('双击', pageIndex)
wx.showToast({
title: '双击'
})
},
// 长按tab事件
onLongPress (pageIndex) {
this.currentPage = pageIndex
console.log('长按', pageIndex)
wx.showToast({
title: '长按'
})
}
},
computed: {
},
onShow () {
// 隐藏小程序自带的tabBar
wx.hideTabBar({})
}
}
</script>
<style scoped>
@import url("~mpvue-tabbar/src/mpvue-tabbar.css");
.container {
padding: 20rpx;
color: #606266;
text-align: left;
background: #fff;
}
</style>- 属性
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| list | Array | [] | tabBar数据设置列表 |
| position | String | bottom | 设置tabBar位置，bottom：在底部; top: 在顶部 |
| fontSize | String | 30rpx | 自定义字体大小 |
| color | String | #606266 | 字体颜色 |
| selectedColor | String | #3794ff | 当前选中tab字体选择 |
| index | Number | 0 | 初始化页面，默认是0 |
- list数据项
数组list至少要包含一个tab数据配置对象。
list: [{
text: '首页',
iconPath: '/static/home.png',
selectedIconPath: '/static/homeSelected.png',
navigationBarTitle: '首页',
navigationBarFrontColor: '#ffffff',
navigationBarBackgroundColor: '#000000',
dot: true,
dotColor: '#3794ff',
badgeText: 1
}, {
text: '岗位',
iconPath: '/static/job.png',
selectedIconPath: '/static/jobSelected.png'
}, {
text: '我的',
iconPath: '/static/me.png',
selectedIconPath: '/static/meSelected.png',
navigationBarTitle: '我的'
}]tab数据对象属性含义：
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| text | String | - | tab文字 |
| iconPath | String | - | tab的icon位置 |
| selectedIconPath | String | - | 被选中的tab的icon位置 |
| navigationBarTitle | String | 默认和text相同 | 头部导航栏的标题 |
| navigationBarFrontColor | String | #000000 | 头部导航栏的前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000, #000等缩写形式或其他值都无效 |
| navigationBarBackgroundColor | String | #ffffff | 头部导航栏的背景颜色值，有效值为十六进制颜色，其他无效 |
| badgeText | Number | 0 | 在tab右上角显示数字，默认0不显示，可以用作新消息提示 |
| badgeBackgroundColor | String | red | 在tab右上角显示数字的背景颜色值 |
| badgeBackgroundColor | String | red | 在tab右上角显示数字的背景颜色值 |
| badgeTextColor | String | #fff | 在tab右上角显示数字的字体颜色值 |
| dot | Boolean | false | 在tab右上角显示一个点，如果设置badgeText大于0，此属性会失效 |
| dotColor | String | red | 在tab右上角显示小点的颜色值 |
- 事件
| 名称 | 参数 | 描述 |
|---|---|---|
| switchTab | pageIndex：即将打开的新页面索引 | 点击tab触发事件 |
| doubleClick | pageIndex：双击的tab所在页面索引 | 双击tab触发事件，两次点击间隔在300ms内才是双击 |
| longpress | pageIndex：长按tab的页面索引 | 长按tab 350ms以上触发 |
注意事项
- 使用创建动态组件无效，好像mpvue不支持这个
- 通过类似const tabComponent = { template: "" }的对象定义组件也无效，需要从其他文件引入组件才行，好像也是mpvue的问题