Intro.自定义tabBar的配置
在app.json文件的UsingComponents下注册
"tabBar": {
"borderStyle": "white",
"selectedColor": "#333333",
"color": "999999",
"list": [
{
"text": "阅读",
"pagePath": "pages/post/post",
"iconPath": "/images/tab/post.png",
"selectedIconPath" : "/images/tab/post@highlight.png"
},
{
"text": "电影",
"pagePath": "pages/movies/movies",
"iconPath": "/images/tab/movie.png",
"selectedIconPath" : "/images/tab/movie@highlight.png"
}
]
}
tabBar的案例可以接触到什么是自定义,但是自定义的程度很小,大部分还是内置完成的。
注意跳转到有选项卡的页面需要使用switchTab
如何创建第一个自定义组件
①根目录下创建components>post>index
②components>post>index.js中定义属性
properties: {
text: {
type: String,//类型
value: ‘123’//默认值
}
}
③在page > xx.json 定义名称
“usingComponents”: {
“c-post”:"/components/post/index"
}
④在page > xx.wxml中使用
⑤components > post > index.wxml
{ {text}}
自定义组件属性
自定义的属性 text 也可以做数据绑定
快速自定义属性时,无法自定义默认值
properties: {
text: String // 也可以为Number(默认值为0)、Object、Boolean(默认值为false)
}
把原来post页面的文章部分作为一个组件,wxml和wxss复制到组件对应下wxml和wxss下
为什么index.wxml(组件的)打印data和posts.wxml不一样:
posts里面data是自带的,所以不用,直接去打印res。然而index是接受到res放进properties