WXSS
来源:互联网 发布:生产环境 调试java 编辑:程序博客网 时间:2024/06/05 10:31
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比,WXSS 扩展的特性有:
- 尺寸单位
- 样式导入
尺寸单位
- rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。
样式导入
使用@import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;
表示语句结束。
示例代码:
/** common.wxss **/.small-p { padding:5px;}
/** app.wxss **/@import "common.wxss";.middle-p { padding:15px;}
选择器
目前支持的选择器有:
.intro
选择所有拥有 class="intro" 的组件#id#firstname
选择拥有 id="firstname" 的组件elementview
选择所有 view 组件element, elementview, checkbox
选择所有文档的 view 组件和所有的 checkbox 组件::afterview::after
在 view 组件后边插入内容::beforeview::before
在 view 组件前边插入内容内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
- style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
<view style="color:{{color}};" />
<view bindtap="viewtap" style="color:{{color}}"> //wxml文件 {{firstTest}}---{{m1.max(arrNum)}}--{{m1.message}} </view>
Page({ //js文件的内容 data: { motto: 'Hello zoe', userInfo: {}, hasUserInfo: false, firstTest:1, color:'red',wxml内的js变量也能调用
<!--index.wxml--><wxs module="m1"> var msg = "this is the first moudle"; var getMax = function(array){ var max = undefined; for (var i = 0; i < array.length; ++i) { max = max === undefined ? array[i] : (max >= array[i] ? max : array[i]); } return max; } var color = 'red'; module.exports.max = getMax; module.exports.message = msg; module.exports.aaa=color;</wxs><!--wxml--><view class="container"> <view bindtap="viewtap" style="color:{{m1.aaa}}">
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
阅读全文
0 0
- WXSS
- WXSS
- 小程序 wxss: 样式
- 微信小程序 WeUi.wxss
- 微信小程序wxss文件属性
- 微信小程序框架wxss(一)wxss概述
- 微信小程序 - app.wxss文件
- 1.3.2微信小程序 WXSS
- 微信小程序wxss加载动画
- 微信小程序wxss设置样式
- 小程序 wxss样式总结
- 小程序wxss公用模板
- 小程序四:视图之WXSS
- 微信小程序ui--集成WeUI.wxss
- 微信小程序入门五:样式表wxss
- 【笔记】微信小程序wxss之各种坑
- 微信小程序wxml和wxss样式
- 微信小程序 四 wxss引用 wxml引用
- 切换出页面执行事件、切换到页面执行事件 、页面重新加载时执行事件
- 【洛谷】P1079 Vigenère 密码
- jquery获取选中单选按钮radio的值,监听type=radio的click事件
- Hive on tez的insert union 子目录的问题
- AC自动机
- WXSS
- TensorFlow常用函数
- 国家级期刊发表有哪些技巧
- 语义歧义消除
- Oracle单行字符函数
- pl/sql developer不需要选中,执行光标所在行
- ovs安装出现fakeroot权限不足问题
- ble之Transmit window offset and Transmit window size
- 时间戳——入门分析