mpvue 自定义小程序tabBar（mpvue停止维护了）

mpvue 自定义小程序tabBar（mpvue停止维护了）

mpvue-tabBar

一个mpvue 自定义小程序tabBar

安装

# 安装依赖npm install# 运行 mpvuenpm run run

步骤

1. 创建tabBar.vue组件

template 部分

// template

js 部分

css 部分

引入自己的图片，默认路径在static/tabbar

2. 引入组件

在pages/index/index.vue中

// 引入import tabBar from '@/components/tabBar'// 注册组件components: { tabBar},

传参selectNavIndex表示当前页面下标

3. 配置app.json中的tabBar属性

app.json 对应小程序中的 app.json，是小程序的全局配置文件

由于使用wx.switchTab跳转，所以要在app.json中配置路径

"list": [{ "text": "首页", "pagePath": "pages/index/main", "iconPath": "static/tabbar/icon_home.png", "selectedIconPath": "static/tabbar/icon_home_HL.png" }, { "text": "记账", "pagePath": "pages/index/main", "iconPath": "static/tabbar/icon_release.png", "selectedIconPath": "static/tabbar/icon_release.png" }, { "text": "我的", "pagePath": "pages/logs/main", "iconPath": "static/tabbar/icon_mine.png", "selectedIconPath": "/tatic/tabbar/icon_mine_HL.png" }],

4. 禁用原生tabBar

在App.vue中调用禁用tabBar方法

wx.hideTabBar()

5. 适配iphoneX

创建vuex，新建文件store/index.js

actions 中创建方法getSystemInfo异步调用wx.getSystemInfo获取系统信息保存在state中

const Vue = require('vue')const Vuex = require('vuex')Vue.use(Vuex)export default new Vuex.Store({ state: { systemInfo: null }, mutations: { ['GET_SYSTEMINFO_SUCCESS'](state, systemInfo) { state.systemInfo = systemInfo; } }, actions: { getSystemInfo({commit, state}){ return new Promise((resolve, reject) => { console.log(state) if (state.systemInfo) { resolve(state.systemInfo) } else { wx.getSystemInfo({ success(res) { commit('GET_SYSTEMINFO_SUCCESS', res) resolve(res) }, fail(err){ reject(err) } }); } }) }, }, getters: { isIphoneX: state => { return state.systemInfo ? state.systemInfo.model.includes("iPhone X") : false } }})

在组件计算属性中添加

computed: { isIphoneX(){ return this.$store.getters.isIphoneX }}

在tempate中添加，判断是否添加isIphoneX样式