wxss 点击样式_微信小程序开发 4.微信小程序WXSS样式渲染.pptx

微信小程序WXSS样式渲染

主讲人：小刚老师

微信小程序开发项目教程

尺寸单位

微信小程序WXSS样式渲染

微信小程序开发项目教程

WXSS 的尺寸单位是rpx(responsive pixel)，它可以根据屏幕宽度进行自适应。屏幕宽度规定为750rpx。例如，iPhone6的屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

样式导入

微信小程序WXSS样式渲染

微信小程序开发项目教程

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

内联样式

微信小程序WXSS样式渲染

微信小程序开发项目教程

在wxml视图组件中，可以使用style、class属性来控制组件的样式。

(1)style：style接收动态的样式，在运行时会进行解析，静态的样式统一写到class中，要尽量避免将静态的样式写进style中，以免影响渲染速度，style属性示例代码如下。

//静态的样式写进style，尽量避免使用

//动态获取

(2)class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上“.”，样式类名之间用空格分隔。

选择器

微信小程序WXSS样式渲染

微信小程序开发项目教程

WXSS样式渲染支持选择器来控制。

常用样式属性

微信小程序WXSS样式渲染

微信小程序开发项目教程

常用样式包括display(显示)、position(定位)、float(浮动)、background(背景)、border(边框)、outline(轮廓)、text(文本)、font(字体)、margin(外边距)、padding(填充)等。

谢谢观看

微信小程序开发项目教程