【前端】微信小程序tab-bar

0. 基于mpvue

1. 引用iview weapp

到 GitHub 下载 iView Weapp 的代码，将 dist 目录拷贝到自己的项目中。 然后再需要页面的mian.js上加上：

"usingComponents": {
    "i-button": "/static/dist/button/index"
}

2.引用tab-bar(对应页面的main.js)

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()
export default {
    config: {
        navigationBarTitleText: '用户中心',
        usingComponents: {
            "i-tab-bar-item": "/static/dist/tab-bar-item/index"
        }
    }
}

3. 设置的默认的tab-bar

tabBar: {
        "backgroundColor":'#FFFFFF',
        "borderStyle":"black",
        "list": [{
          "pagePath": "pages/todayMenber/main",
          "text": "今日到岗"
        }, {
          "pagePath": "pages/me/main",
          "text": "我"
        }]
      }

4. 在Created钩子函数中使用wx.hideTabBar();

5. 在页面上使用

<i-tab-bar :fixed="true" current="mine" @change="handleChange">
   <i-tab-bar-item key="remind" icon="remind" current-icon="remind_fill" title="今日到岗"></i-tab-bar-item>
    <i-tab-bar-item key="mine" icon="mine" current-icon="mine_fill" title="我"></i-tab-bar-item>
</i-tab-bar>

6. 效果

（写日志的时候，没把后台提供数据的程序打开，直接截的图，所以图片上面会有请求失败的错误） 灵感来源：https://www.javascriptcn.com/read-33004.html