图文并茂的学习笔记--微信小程序自定义tabbar

我发现自带的那个tabbar不可以修改样式，没得搞啊，这不行，要改

首先，我们看文档，地址在下面

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

下载打开示例代码，开工

打开是这个样子

1.我们把这个文件夹复制到自己项目的根目录（一定要放到根目录下，你要是不照着做，天知道会出现什么奇怪的问题啊？）

2.在 自己项目的app.json 中添加 custom 字段，设置为true，（其他的 tabBar 相关配置也老老实实写，不要偷懒）

在 自己项目的app.json 中声明 usingComponents

根据自己的项目配置custom-tab-bar/index.js（注意观察那个pages前面有个斜杠，不听话可能会出奇怪的问题）

复制粘贴官方子页面的onShow方法，selected自行设置

 /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // tabbar
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
            this.getTabBar().setData({
                selected: 3
            })
        }
    },

记得按照我们自己定义的顺序去修改selected每个页面的值

现在已经可以切换了，你可以试一下，但是还会有点问题，就很讨厌，点击的时候闪烁，我接下来试一下解决这个问题~~ 如果解决了，我就再写一个笔记记录一下