微信小程序小白秃头学习自定义tabbar(导航栏)
微信小程序的自定义tabbar
在看下面内容之前一定!!!一定!!!一定!!去自己的开发者工具里面看一下自己的调试基础库版本号是多少,微信文档中标明 基础库 2.5.0 开始支持
如果不是就改回来,
好了,一起参考一下官方的API
文档的地址
首先我们看到第一句话
为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。
所以说当版本不支持时,会使用相关配置而不是自定义,所以app.json中的tabBar属性我们照常写.
"tabBar": {
"selectedColor":"#f00",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/images/home.png",
"selectedIconPath": "/images/aichong.png"
},
{
"pagePath": "pages/myInfo/myInfo",
"text": "我的",
"iconPath": "/images/myIcon1.png",
"selectedIconPath": "/images/myIcon2.png"
}
]
}
这里写完之后可以直接复制过去的,所以这里多一些点后,后面cv就开心一点
好了默认的好了之后,看一下模拟器上是不是出来自带的tabbar了,出来之后就可以下一步了,出不来就自己再试试,看看是不是路径或者属性错了.
第二句
在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
后面的我们已经完成了,那么我们只需再添加一个custom属性就行了,custom是定制的意思,值true表示定制一个tabbar,这样就能让小程序去调用我们的自定义导航栏
这里有一点不是很重要的,如果你的页面4兄弟不是自动生成的,json里面的"useingComponents":{}不能少,自定义tabbar的本质就是创建和使用一个组件,所以这句话少不了
加了custom之后,我们原本的导航栏就没了,不过不慌,开发的时候,最幸福的就是看到报错了, Component is not found in path “custom-tab-bar/index”
哦吼,找不到这个路径上的组件,那么
下一步,创建组件
注意!!!,微信已经默认了路径了,
所以不要瞎起名字,眼睛不要,可以捐给需要的人
在代码根目录(miniprogram)下添加入口文件夹:
custom-tab-bar,在文件夹上右键创建component
文件名是index,注意不要瞎起,瞎起同上
这里补充一点page和component前者是页面构造器,后者是组件构造器,只能写一个
就像是let变量,定义了是个页面,就不能定义一个组件
不然会报错
这是component在前page在后的报错
Please do not register multiple Pages in custom-tab-bar/index.js
反之他不报错,我就很难受了
感觉之前的结论在放屁,
而且默认的wxml出现在顶部了,这就更难受了,感觉像是page被component顶掉了,因为tabbar是被当做组件使用的,用page好像 我试了一下,删掉了component他还是一样能出来,这就更难受了…我,算了,我们就当做语义化吧,还有page和component生命周期也是有区别的所以,按语意来吧,不倒腾了.
-----------------------分割线------------------------------------
在custom-tab-bar/index.json有一句component:true,表示这个是个组件,所以不管是page还是component都能被识别,至于先page再component不报错…在研究研究
到这里之后该有的都有了,接下来变量写data,函数写methods,和平常写页面就没差了
!!!wxml官方文档推荐使用cover-view和cover-img,因为这两个标签层级高,不容易被内容覆盖.详情可以去文档里看看