【微信小程序】全局样式与局部样式(app.wxss)/全局配置(app.json)/小程序窗口组成/页面配置(index.json)
1.全局样式
定义在app.wxss中的样式称为全局样式,作用于每个页面
2.局部样式
在页面的.wxss文件中的样式成为局部样式,只作用于当前页面
*注意(谁权重大听谁的)
-
当局部样式和全局样式冲突时,根据就近原则,局部样式会覆全局样式
-
只有当局部央视的权重大于或等于全局样式时,才会覆盖全局的样式
全局配置
小程序根目录下的app.json文件时小程序的全局配置文件。常用配置如下:
- pages:记录当前小程序所有页面的存放路径
- window:全局设置小程序窗口的外观
- tabBar:设置小程序底部的tabBar效果
- style:是否启用做新版的组件样式
1.小程序Window窗口组成部分
2.了解window节点常用的配置项
3.开启全局下拉刷新功能
概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为
设置步骤: app.json -> window ->把 enablePullDownRefresh的值设置为true
注意:在app.json中启用下拉刷新功能,会作用于每个小程序页面!
4.设置下拉背景色
backgroundColor
5.设置下拉刷新时loading的样式
当全局开启下拉刷新功能之后,默认窗口的loading 样式为白色,如果要更改loading 样式的效果,设置步骤为 app.json -> window ->为backgroundTextStyle指定dark值。效果如下:
6.设置上拉触底的举例
概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。设置步骤: app.json -> window ->为onReachBottomDistance设置新的数值
注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可。
距离底部50像素时自动加载数据
tabBar
1.什么是tabBar
tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换。
小程序中通常将其分为:
- 顶部tabBar
- 底部tabBar
注意:
tabBar中只能配置==最少2个==、==最多5个==tab页签
当渲染==顶部 tabBar==时,==不显示icon==,只显示文本
2.tabBar的6个组成部分
3.tabBar节点的配置项
4.每个tab项的配置选项
tabBar的页面必须放pages配置的最前面
"pages":[
"pages/list/list",
"pages/index/index"
],
"tabBar": {
"backgroundColor": "#fff",
"borderStyle": "black",
"color": "#000000",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "./images/index.png",
"selectedIconPath": "./images/index-action.png"
},{
"pagePath": "pages/list/list",
"text": "菜单",
"iconPath": "./images/menu.png",
"selectedIconPath": "./images/menu-action.png"
}]
},
页面配置
1.页面配置文件的作用
小程序中,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观、页面效果等进行配置。
2.页面配置文件和全局配置文件的关系
如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的.json配置文件”就可以实现这种需求。