mpvue-tab

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的问题