2.3 装裱与布局——WXSS基础
使用JavaScript可以进行界面数据和交互逻辑的处理,使用WXML可以进行页面结构的搭建,使用WXSS可以进行页面布局和样式的细化调整。WXSS是专供小程序使用的一套样式表语言,与网页开发中的CSS语法基本一致,只是针对小程序做了一些补充和修改。
2.3.1 WXSS与CSS
对于编写CSS代码来说,最重要的是掌握选择器的用法及熟悉样式属性的用法。WXSS与CSS的选择器和属性基本一致,相较于CSS,WXSS优化了尺寸单位,新增了样式导入。
关于尺寸,WXSS除支持CSS定义的全部尺寸单位外,还额外定义了一个自适应像素单位(rpx),可使用的尺寸单位如表2-5所示。
表2-5 可使用的尺寸单位
通过表2-5列举的尺寸单位可以精准地控制组件的渲染尺寸,如修改index.wxml代码,示例代码如下:
在index.wxss中编写样式,示例代码如下:
运行代码,效果如图2-8所示。
图2-8 定义组件尺寸
上面的display属性设置组件的展示模式,默认text组件为行内元素,将其更改为块级元素使尺寸设置生效。
关于样式表的导入其实非常简单,组件的导入也一样,我们可以将一些通过的样式定义在公共样式表文件中,在需要使用的页面进行导入即可。例如,在common文件夹下,新建一个命名为common.wxss的文件,编写如下代码:
在index.wxss中直接进行引用即可,示例代码如下:
在引用时需要注意路径的正确性。
2.3.2 WXSS选择器
选择器的作用是匹配文档中的元素,最简单的选择器是元素选择器,示例代码如下:
上面WXSS代码设置页面中所有text组件文字颜色为绿色。在选择元素时,也可以进行组合选择,示例代码如下:
上面的代码设置页面中所有text组件和button组件的文本颜色为绿色。
类选择器会匹配元素的class属性,如下面的text组件设置其class属性为label:
使用符号“.”加上class名可以选中这个元素,示例代码如下:
id选择器会匹配元素的id属性,如下面的text组件设置其id属性为label:
使用符号“#”加上id名可以选中这个元素,示例代码如下:
也可以通过标签的任意一个属性选中元素,示例代码如下:
上述代码的作用是选中所有设置id属性值的元素,也可以根据属性值进行精准选择,示例代码如下:
后代选择器可以精准地选中某个父标签下的子标签,修改index.wxml文件,示例代码如下:
上面的代码创建了两个text标签,其中一个包裹在view标签内,要选中它,可以使用后代选择器,示例代码如下:
与后代选择器对应的还有子选择器,后代选择器会选中父标签内所有的指定元素,无论层级结构如何;而子选择器只会选择父标签中的子元素,子元素的子元素不会被选择。示例代码如下:
兄弟选择器用在同级元素的选择中,修改index.wxml文件,示例代码如下:
使用如下选择器可以选中紧跟view组件后面的text组件元素:
2.3.3 WXSS背景相关属性
WXSS中提供了许多背景属性,开发者可以对组件的背景进行自定义。常用背景设置相关属性如表2-6所示。
表2-6 常用背景设置相关属性
2.3.4 WXSS文本相关属性
文本相关属性用来对元素中的文字进行设置,其可以对文字的字体、字号、颜色、对齐方式、缩进等属性进行配置。文本相关属性如表2-7所示。
表2-7 文本相关属性
2.3.5 WXSS边距与边框相关属性
边距用来控制组件与组件之间、组件与组件内部子组件之间的布局效果。边框相关属性用来设置组件的边界显示效果,如表2-8所示。
表2-8 边框相关属性
续表
2.3.6 WXSS元素定位相关属性
在默认情况下,小程序的页面布局和网页一样,是从上到下流式布局的。与CSS不同的是,WXSS提供了一套弹性盒的布局方式,关于弹性盒布局,后面在介绍小程序页面布局技术时会详细介绍,本节仅列举设置元素显示和元素定位方式的相关属性,如表2-9所示。
表2-9 设置元素显示和元素定位方式的相关属性
相对定位可以使元素相对于其当前位置进行调整,通过设置left、right、top、bottom属性分别进行左、右、上、下的调整,示例代码如下:
运行代码,效果如图2-9所示。
图2-9 进行相对定位
fixed绝对定位相对于页面窗口进行定位,不会占据流式布局的空间,使用它可以将组件固定在页面窗口的某个位置,并且不会随页面的滚动而滚动。通过设置left、right、top、bottom属性分别进行相对页面窗口左、右、上、下距离的调整,示例代码如下:
运行代码,效果如图2-10所示。
图2-10 相对于页面窗口的绝对定位
absolute绝对定位和fixed绝对定位类似,只是absolute是相对父容器的绝对定位,会跟随父容器滚动。
2.3.7 其他显示效果相关属性
WXSS中还定义了许多元素的尺寸设置、透明度设置等属性,如表2-10所示。
表2-10 元素的尺寸设置、透明度设置等属性