在tabbar 上实现navigate 跳转,打开新的页面
发布于 4 年前 作者 chao99 2054 次浏览 来自 分享

先上图看下效果

当点击底部导航“发布”按钮后,直接通过navigate 跳转到新的页面而不是切换tab

实现原理:使用tabbar自定义组件,官方有案例,将案例导入到小程序代码片段,导入后即可实现自定义tabbar,这里最关键的点是,在app.json中的tabbar不能添加要跳转的元素,否则会报不能navigate跳转tabbar页面的错误。

导入代码片段后,修改app.json文件

 "tabBar": {

    "custom": true,

    "color": "#000000",

    "selectedColor": "#d81e06",

    "borderStyle": "black",

    "backgroundColor": "#ffffff",

    "list": [

      {

        "pagePath": "tt_dache/pages/home/home",

        "iconPath": "/tt_dache/resource/images/home.png",

        "selectedIconPath": "/tt_dache/resource/images/home_selected.png",

        "text": "首页"

      },

      {

        "pagePath": "tt_dache/pages/user/user",

        "iconPath": "/tt_dache/resource/images/user.png",

        "selectedIconPath": "/tt_dache/resource/images/user_selected.png",

        "text": "我的"

      }

    ]

  }


修改custom-tab-bar/index.js
Component({
  data: {
    selected: 0,
    show: true,
    color: "#000000",
    selectedColor: "#d81e06",
    list: [{
      pagePath: "/tt_dache/pages/home/home",
      iconPath: "/tt_dache/resource/images/home.png",
      selectedIconPath: "/tt_dache/resource/images/home_selected.png",
      text: "首页"
    }, {
      pagePath: "/tt_dache/pages/issue/issue",
      iconPath: "/tt_dache/resource/images/add.png",
      selectedIconPath: "/tt_dache/resource/images/add_selected.png",
      text: "发布",
      navigate:true
    }, {
      "pagePath""/tt_dache/pages/user/user",
      "iconPath""/tt_dache/resource/images/user.png",
      "selectedIconPath""/tt_dache/resource/images/user_selected.png",
      "text""我的"
    }]
  },
  attached() {},
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      console.log(data.index)
      if (this.data.list[data.index].navigate == true) {

        wx.navigateTo({//跳转到新的页面
          url: url,
          complete: function (res) {
            console.log(res);
            
          }
        })

      } else {
        wx.switchTab({
          url
        })
        this.setData({
          selected: data.index
        })
      }

    }
  }
})
回到顶部