tabbar图标切换 要点击两次才能有选中状态问题

问题:tabbar图标切换 要点击两次才能有选中状态
原因:没有拷贝组件函数


官网中所给出的自定义组件地址:here
app.json 中添加:

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

然后,在list中至少关联两个页面。在官方示例案例 代码中获取到custom-tab-bar以及对应的image文件,在代码根目录下添加入口文件:

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

然后,简单修改custom-tab-bar/index.js中的list,使得和app.json中定义的一致。然后自己就以为没有了,就会出现标题所示的问题,即:需要点击两次才会切换图标为选中状态。

解决:

需要在每一个关联tabbar的页面的js文件中添加下面的代码:

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

其中selected: 0的值需要自己根据顺序指定值。然后,就不会有上述现象了。
当然,此事的页面中默认就是组件,如果需要这种方式使用,需要将每个page页对应的js文件的App删除,然后只保留Component部分,然后如果需要点击函数,就需要采用组件的方式,如:

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0
        })
      }
    }
  },
  methods: {
    weizu: function(){
      console.log(123)
    }
  }
})

在对应的wxml文件中进行事件绑定即可:

<view class="card-range" bindtap="weizu">打卡排行榜</view>

测试发现,其实这种方式不好,存在闪烁现象。
由于之前做过微信小程序的tabbar使用,记得有简单的方式,就考虑将custom-tab-bar文件删除掉,然后将 app.json 中的custom修改下为false

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

果然可以。就不再考虑使用自定义组件的方式来做tabbar了。

上一篇:性能测试函数


下一篇:Custom WebSite icon on Home of Mobile