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以上触发

注意事项

1. 使用创建动态组件无效，好像mpvue不支持这个
2. 通过类似const tabComponent = { template: "" }的对象定义组件也无效，需要从其他文件引入组件才行，好像也是mpvue的问题