微信小程序自定义tabbar官方实例详解

今天遇到一个需求在小程序tabbar上做扫一扫的功能,但是官方提供的tabbar只能作为跳转页面使用,只能自定义tabbar来实现。

 

预想了两个方案:

 

 一、写一个view用绝对定位在页尾,上面放三个按钮其中两个navigateto跳转页面,中间的为扫一扫功能键。朋友说这种跳转的的时候会出现闪烁的bug,感觉有点low暂放。

 

二、好几个月没写网上搜了下demo发现官方提供了一个自定义tabbar的demo,下载了发现不难,但是遇到几个坑点,记录一下避免以后踩坑。

自定义 tabBar · 小程序

 

第一步、先下载官方的demo,然后进行合并。

 

第二步、在 app.json 中的 tabBar 项指定 custom 字段,设置为true,同时其余 tabBar 相关配置也补充完整。

所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。





第三步、修改custom-tab-bar/index.js的文件





ps:这里需要注意的是list中的pagePath一定要写绝对路径/pages开头




 

然后是扫一扫的功能,我扫一扫在数组第二个下标为1,判断下标为1时不做页面跳转直接打开扫一扫的功能即可。

 

ps:tabbar做功能键的时候要写个空白页面出来不要和其他tabbar页共用一个,中午懒省事耽误好久找问题。

 

第四步、把官方给的使用方法放到tabbar跳转页的onShow方法里,selected根据list下标位置进行设置





 

效果图

 





 

完成以上操作,自定义tabbar就可以使用了,只是官方给的样式比较丑,需要自行调整

 

你是不是认为写的不合理,认为组件不该放在外层,这是官方的写法,可以去官方看文档,打开链接后点击预览唤起开发者工具,唤起失败可以先手动打开一下开发者工具,再点击。https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html?search-key=%E8%87%AA%E5%AE%9A%E4%B9%89tabbar

 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/1131.html