1、在src文件夹下创建custom-tab-bar文件
文件夹下创建小程序的四个文件js/wxml/wxss/json
里面的内容和小程序官方文档写的一样
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
就是这些内容
可以预览效果导入段落直接copy到你的项目里,注意修改js文件里的路径
2、在static文件夹下新建image文件夹,放入四张需要的图片,这个我用的也是小程序官网自带的
3、pages.json文件写入页面路径,图片等等的内容
注意pages.json文件的tabbar的custom一定是true
4、在main.js写入
Vue.mixin({
methods:{
setTabBarIndex(index) {
if (typeof this.$mp.page.getTabBar === 'function' &&
this.$mp.page.getTabBar()) {
this.$mp.page.getTabBar().setData({
selected: index
})
}
}
}
})
5、在页面中调用方法
index首页
about关于我们页面