小程序-wxss

目录

wxss模板样式

wxss

wxss和css的关系

rpx是什么？

rpx的实现原理

wxss模板样式-样式导入

什么是样式导入

@import的语法格式

全局样式和局部样式

了解window节点常用的配置项

设置导航栏的标题

设置导航栏背景色

设置导航栏的标题颜色

全局开启下拉刷新功能

模拟器的问题说明

设置下拉刷新时窗口的背景色

设置上拉触底的距离

tabBar

什么是tabBar

tabBar的6个组成部分

了解tabBar节点的配置项

每个tab项的配置选项

实现tabBar的案例

页面配置

页面配置文件的作用

页面配置和全局配置的关系

页面配置中常用的配置项

---

wxss模板样式

wxss

wxss是一套样式语言，用于美化wxml的组件样式，，类似网页开发中的CSS

wxss和css的关系

        

rpx是什么？

        rpx(responsive pixel)是微信小程序独有的，用来解决屏适配的尺寸单位。

rpx的实现原理

        

了解

wxss模板样式-样式导入

什么是样式导入

使用WXSS 提供的@import语法，可以导入外联的样式表。

@import的语法格式

全局样式和局部样式

        定义在app.wxss 中的样式为全局样式，作用于每一个页面。

        

        在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。

了解window节点常用的配置项

设置导航栏的标题

设置步骤：app.json -> window ->navigationBarTitleText

需求：”WeChat“ 修改为”小海想要什么“

设置导航栏背景色

设置步骤：app.json -> window ->navigationBarBackgroundColor

需求：把导航栏的背景色，从默认的#fff 修改为 #2b4b6b

设置导航栏的标题颜色

设置步骤：app.json -> window ->navigationBarTextStyle

将black修改为white

注意：navigationBarTextStyle 的可选值只有black 和 white

全局开启下拉刷新功能

注意：在app.json 中启用下拉刷新功能，会作用于每个小程序页面！

模拟器的问题说明

        模拟器不能百分百模拟手机操作

设置下拉刷新时窗口的背景色

        

设置下拉刷新时 loading 的样式

注意 backgroundTextStyle 的可选值只有 light 和 dark

设置上拉触底的距离

注意：默认距离为50px，如果没有特殊需求，建议使用默认值即可。

"onReachBottomDistance": 50

tabBar

什么是tabBar

        

tabBar的6个组成部分

了解tabBar节点的配置项

每个tab项的配置选项

实现tabBar的案例

①拷贝图标资源

        

②新建 3 个对应的tab页面

③配置 tabBar 选项

tabBar页面放app.json中page中前面

页面配置

页面配置文件的作用

        小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

页面配置和全局配置的关系

        

页面配置中常用的配置项

        

标红的，可以放到具体页面的.json