uniapp—小程序自定义tabbar（非组件）（图文）_uniapp custom-tab-bar

1、在src文件夹下创建custom-tab-bar文件

文件夹下创建小程序的四个文件js/wxml/wxss/json
1

里面的内容和小程序官方文档写的一样
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
                })
            }
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12

5、在页面中调用方法

index首页
about关于我们页面