uniapp—小程序自定義tabbar（非組件）（圖文）

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關於我們頁面