# mpvue-tab

> 基于mpvue的小程序自定义tabbar组件

Latest version **0.0.9** (published 2019-09-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install mpvue-tab
pnpm add mpvue-tab
yarn add mpvue-tab
bun add mpvue-tab
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2019-09-23 |
| First published | 2019-09-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 23.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | plusye |
| Maintainers | plusye |
| Keywords | mpvue, mpvue-tabBar, 小程序自定义tabBar |

## Links

- npm: https://www.npmjs.com/package/mpvue-tab
- Repository: https://github.com/plusye/mpvue-tabbar
- Homepage: https://github.com/plusye/mpvue-tabbar.git
- Issues: https://github.com/plusye/mpvue-tabbar/issues
- npm.io page: https://npm.io/package/mpvue-tab

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [user](https://npm.io/package/user.md) 0.0.0

## Recent versions

- 0.0.9 (latest) — 2019-09-23
- 1.0.0 — 2019-09-23

## README

## mpvue自定义微信小程序tabbar
- 可以给tabBar添加双击事件
- 可以给tabBar添加长按事件
- 在子页面定义tabBar
## 效果演示
![image](https://upload-images.jianshu.io/upload_images/1470822-8d1089ca7985745e.gif?imageMogr2/auto-orient/strip)
## 使用文档
- 安装

```
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. 使用<component :is="currentTab"></component>创建动态组件无效，好像mpvue不支持这个
2. 通过类似const tabComponent = { template: "" }的对象定义组件也无效，需要从其他文件引入组件才行，好像也是mpvue的问题

---
_Source: https://npm.io/package/mpvue-tab · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._