微信小程序 样式和全局配置

WXSS

wxss 把屏幕分为750个物理像素,大屏大,小屏小,随着设备不一致自动适配

推荐使用iPhone6作为标准,1个rpx = 0.5个px,把px乘以2就是rpx的参数

@import  

导入外部样式表

@import '/common/common.wxss'

微信小程序 样式和全局配置_第1张图片

 样式

微信小程序 样式和全局配置_第2张图片

 权重一样时,局部样式可以覆盖全局样式

配置

导航栏区域 navigationBar

背景区域 backgroud

页面主体区域

window

可以配置【导航栏区域 navigationBar】和【背景区域 backgroud】

微信小程序 样式和全局配置_第3张图片

 背景颜色

微信小程序 样式和全局配置_第4张图片

导航栏标题颜色

微信小程序 样式和全局配置_第5张图片

设置全局下拉 

微信小程序 样式和全局配置_第6张图片

下拉刷新的背景颜色 

微信小程序 样式和全局配置_第7张图片

下拉刷新时小圆点的样式

微信小程序 样式和全局配置_第8张图片

 下拉触底的触发值,默认50

微信小程序 样式和全局配置_第9张图片

tabBar

tabBar 最少2个,最多5个

如果是底部,可以显示ICON和文本,如果是顶部,只显示文本

tabBar配置项

backgroundColor:背景颜色

borderStyle:边框颜色

iconPath:未选中的图片路径

selectedIconPath:选中的图片路径

color:未选中的文字颜色

selectedColor:选中的文字颜色

tabBar配置项属性

参考:https://www.cnblogs.com/xinjingsiyuan/articles/16875767.html

微信小程序 样式和全局配置_第10张图片

 

你可能感兴趣的:(微信小程序,微信小程序)