源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 84|回复: 20

[JavaScript] 微信小程序 教程之WXSS

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2018-12-25 04:26:38 | 显示全部楼层 |阅读模式
这篇文章主要介绍了微信小程序 WXSS的相关资料,并附简单实例代码,需要的朋友可以参考下

系列文章:

微信小程序 教程之WXSS
微信小程序 教程之引用
微信小程序 教程之事件
微信小程序 教程之模板
微信小程序 教程之列表渲染
微信小程序 教程之条件渲染
微信小程序 教程之数据绑定
微信小程序 教程之WXML

WXSS

WXSS(WeiXin Style Sheets)是MINA设计的一套样式语言,用于描述WXML的组件样式。

WXSS用来决定WXML的组件应该怎么显示。

为了适应广大的前端开发者,我们的WXSS具有CSS大部分特性。 同时为了更适合开发微信小程序,我们对CSS进行了扩充以及修改。

与css相比我们扩展的特性有:

尺寸单位
样式导入

尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34px
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6s 1rpx = 0.552px 1px = 1.81rpx

rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。

建议:开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。

样式导入

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

/** common.wxss **/
.small-p{
 padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p:{
 padding:15px;
}

内联样式

MINA组件上支持使用style、class属性来控制组件的样式。

style:静态的样式统一写到class中。style接收动态的样式,在运行时会进行解析,所以不要将静态的样式写进style中,以免影响渲染速度。

<view style="color:{{color}};" />

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

<view class="normal_view" />

选择器

目前支持的选择器有:

选择器 样例 样例描述
.class .intro 选择所有拥有class="intro"的组件
#id #firstname 选择拥有id="firstname"的组件
element view 选择所有view组件
element, element view checkbox 选择所有文档的view组件和所有的checkbox组件
::after view::after 在view组件后边插入内容
::before view::before 在view组件前边插入内容

全局样式与局部样式

定义在app.wxss中的样式为全局样式,作用于每一个页面。在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

回复

使用道具 举报

0

主题

2万

回帖

120

积分

注册会员

Rank: 2

积分
120
发表于 2022-11-5 07:27:49 | 显示全部楼层
哈哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

347

积分

中级会员

Rank: 3Rank: 3

积分
347
发表于 2022-12-21 10:35:27 | 显示全部楼层
源码源码源码源码源码源码源码源码源码源码源码源码源码
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

59

积分

注册会员

Rank: 2

积分
59
发表于 2023-5-7 19:32:28 | 显示全部楼层
你们谁看了弄洒了可能
回复 支持 反对

使用道具 举报

27

主题

2万

回帖

331

积分

中级会员

Rank: 3Rank: 3

积分
331
发表于 2023-6-22 02:41:56 | 显示全部楼层
还不错啊
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-6-23 21:34:35 | 显示全部楼层
刷屏刷屏刷屏
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-8-20 13:02:36 | 显示全部楼层
sdsadsadsadf
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

307

积分

中级会员

Rank: 3Rank: 3

积分
307
发表于 2023-8-24 05:07:23 | 显示全部楼层
而快乐你们快乐马年快乐
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-11-9 21:59:07 | 显示全部楼层
sdsadsadsadf
回复 支持 反对

使用道具 举报

5

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2024-3-11 01:09:57 | 显示全部楼层
下载来瞧瞧
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 00:58 , Processed in 0.116468 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表