二uniapp的首页认识
首页我们进入uniapp,首先肯定要先进去首页,那么怎么设置本平台的首页呢,看过上一篇文章的童鞋们都晓得每个文件夹里的含义,这里再截图说下聪明的童鞋可能都猜到了 我们要进入页面的配置信息(pages.json)中{"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/
·
首页
我们进入uniapp,首先肯定要先进去首页,那么怎么设置本平台的首页呢,看过上一篇文章的童鞋们都晓得每个文件夹里的含义,这里再截图说下
聪明的童鞋可能都猜到了 我们要进入页面的配置信息(pages.json)中
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
这里pages是一个数组,数组中包含的对象就是每一个页面,默认第一项是应用启动页,我们只需要将首页放在该数组的第一项即可。
- path:页面启动的路径,我们这里是pages/index/index,要养成良好的规范,所有的页面都放在pages中
- style:页面的配置信息,里面包含页面的标题、颜色、背景色以及是否可下拉刷新等等功能。Hbuilder有自动提示功能,小伙伴可以都尝试下。
具体文档地址:
https://uniapp.dcloud.io/collocation/pages?id=style
除了每个页面的“pages”属性,还有globalStyle属性,这个属性代表着全部页面的style,若在pages的数组中没有设置单独的样式,则自动使用全部style里的属性。
"globalStyle": {
"navigationBarTextStyle":"white",
"navigationBarTitleText": "测试内容",
"navigationBarBackgroundColor": "#51CC62",
"backgroundColor": "#51CC62"
}
结果如下:
解析:因为我们在pages中的style属性里也设置里标题,所以自动使用子类的标题,下面我们将子类的标题删除,再测试一下:
代码:
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
//"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app测试",
"navigationBarBackgroundColor": "#55aa7f",
"backgroundColor": "#F8F8F8"
}
}
保存后自动编译
结果如下:
解析:因为页面我们没有设置,所以自动使用全局配置
下一节 tabBar组件
更多推荐
已为社区贡献2条内容
所有评论(0)