微信小程序踩坑 之 自定义tabbar切换图标bug

    技术2022-07-10  101

    自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景。

    首先 从 **在开发者工具中预览效果 ** 点击获取custom-tab-bar组件代码,然后开始修bug

    app.json 中配置 custom , app.json中全局声明 usingComponents 运行代码之后会发现:

    tabbar图标切换 要点击两次才能有选中状态 解决办法:

    打开 custom-tab-bar 文件夹下的 index.wxml ,在 van-tabbar (结合 vant-weapp使用的) <van-tabbar bind:change="switchTab">

    绑定监听事件 switchTab

    打开 custom-tab-bar 文件夹下的 index.js , 获取到当前切换到的页面 在tabbar 中的 索引下标 methods: { switchTab(e) { getApp().globalData.activeIdx = e.detail wx.switchTab({ url: '/' + this.data.list[e.detail].pagePath }) } } 为了方便在其他页面获取共享值 activeIdx , 在项目根目录下 app.js 文件中添加 globalData: { activeIdx: 0 } 在每个tab 切换页面 的 onShow 时候再设置 下 activeIdx onShow: function () { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ activeIdx: 0 }) } } 重新编译后即解决此bug
    Processed: 0.014, SQL: 9