之前开发小程序,用的都是官方自带的在app.json里面配置好的tab,如果想添加点花样需要,就需要自定义,于是就上网上找了案例,自己试了一下。极简的自定义tab切换,并没有往下深究,可能会有漏洞,在此先记录一下。
样式未调整,但可以点击切换
下面是代码
根据微信官方文档,https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 的使用流程来,
1。先新建一个名为custom-tab-bar的文件夹(必须叫这个名字),里面的页面名称为index,一定得是index,否则无效;
2.app.json文件中tarbar里面写上:"custom": true,此时,页面将不再显示tabbar;
3.app.ison文件中添加:
"usingComponents": {
"customtabbar":"custom-tab-bar/index"
},跟tabBar同级,图片如下:
注意:虽然这里是自定义的tabBar,但是这里的list还要写,起配置内容要和自定义的内容相符
下面就来说说custom-tab-bar文件夹
此文件夹的内容与平常的文件夹并无差别,有四个文件组成,
wxml:里面放的是你的tab,当然,你也可以写成一个数组循环他
js:里面放一些逻辑
wxss:就是你想给你的tab什么样的样式;
json:目前测试阶段没用着;
就这样一个简单的自定义tab就好了。
简单总结一下:
···· 新建一个custom-tab-bar的文件(必须叫这个),是自定义的tab,样式及所有操作都在里面;
···· app.json里面添加两个属性:"custom": true,和 "usingComponents": {
"customtabbar":"custom-tab-bar/index"
},
如果想要有点击更换图片或颜色的效果,可以提前在app.json文件里配好,直接复制到custom-tab-bar下面的index中,循环它再做一些逻辑判断。
潦草的自定义tab就好了,等到真是开发中,完善了,在贴出完整的代码