小程序自定义tabBar

最新推荐文章于 2023-03-20 20:22:04 发布

李先生打代码

最新推荐文章于 2023-03-20 20:22:04 发布

阅读量372

点赞数

文章标签：小程序 json sass

本文链接：https://blog.csdn.net/m0_59993469/article/details/121685902

版权

1. 配置信息

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

{
  "tabBar": {
    "custom": true,    //改为true
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}

2. 添加 tabBar 代码文件

在代码根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3. 编写 tabBar 代码

到此运行代码之后会发现：tabbar图标切换要点击两次才能有选中状态

原因：切换每个页面的selected未修改，可继续借鉴custom-tab-bar案例，案例里面的两个页面还有这段代码：

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 1
        })
      }
    }
  }
})

所以解决方法，在我们的页面里面也添加show方法改变selected

onShow: function () {
    if (typeof this.getTabBar === 'function' &&  this.getTabBar()) {
      this.getTabBar().setData({
        selected: 2
      })
    }
  }