wxss基础使用

# 基本使用

rpx 尺寸单位
@import 样式导入

rpx尺寸单位

原理：鉴于不同设备屏幕大小的不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上分为 750 份

# 样式导入

@import '/common/common.wxss'

app.wxss 中的样式自动会生成全局样式

权重问题

相同权重下，采取就近原则，否者权重高的生效

# 全局配置

pages
window
tabBar
style

# `window`

navigationBar(导航栏) 、 background(背景) 、main(主体)

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigatoinBarBackgroundColor	HexColor	#000000	导航栏背景色
navigationBarTextStyle	String	white	导航栏标题颜色
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉loading的样式
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBootomDistance	Number	50	页面上拉触底时距离页面底部距离，单位为px

# tabBar

实现多页面的快速切换，有底部和顶部类型的 tabBar

默认情况下，最少有2个tab标签，最多有5个tab标签

backgroundColor ： tabBar 的背景色
selectIconPath ：选中icon的路径
borderStyle ：tabBar 上边框的颜色
iconPath ：未选中 icon 的路径
selectedColor ： tab 上的文字选中时的颜色
color : tab 上文字的默认颜色

具体的配置项

属性	类型	必填	默认值	描述
position	String		bottom	tabBar的位置，仅支持 bottom/top
borderStyle	String		black	tabBar上边框的颜色，仅支持while/black
color	HexColor			tab上文字的默认颜色
selectedColor	HexColor			tab上文字选中的颜色
backgroundColor	HexColor			tabBar的背景色
list	Arry	是		tab 页签列表

list 每项配置项

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在 pages 中预先定义
text	String	是	tab 上显示的文字
iconPath	String		未选中的 icon 路径
selectIconPath	String		选中的 icon 路径

示例

"tabBar": {
    "list": [{
      "pagePath": "pagePath",
      "text": "text",
      "iconPath": "iconPath",
      "selectedIconPath": "selectedIconPath"
    }]
  },

1
2
3
4
5
6
7
8

# 页面配置

当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准