- 在tabbar 上实现navigate 跳转,打开新的页面
先上图看下效果 [图片][图片][图片] 当点击底部导航“发布”按钮后,直接通过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 }) } } } })
2020-08-21 - 微信小程序taBbar添加事件
具体场景:有一个taBbar名叫“拨打电话”,当我点击这个“拨打电话”的taBbar时,调用小程序的API(makePhoneCall)。 看文档中,taBbar中一定是跳转到对应的页面上,我能不能把taBbar只当成button来使用,触发一个事件,就OK了呢? 希望大家能帮我解下惑,谢谢!
2017-12-27