微信小程序,学习笔记(二)样式(WXSS)及一个简单的小测试用例
WXSS(WeiXin Style Sheets)
这东西其实是微信自己的一种 CSS
语言,大部分都还是 CSS
语法,也有自己的东西,主要针对微信自己的 WXML
标记语言而生的,用来丰富其组件的显示效果。
WXSS
相对CSS
并没有太大差别,只是需要注意以下几点rpx
像素单位,具体值是:1rpx == 0.5px == 1物理像素
,物理像素说的是硬件上表达的像素概念;- 样式导入:在
WXSS
文件中使用@import test.wxss;
方式导入,后面的分号不要省略; - 样式使用方式:内联和行内,由于组件的
style
属性接受动态参数形式去在运行时改变样式,因此建议:静态样式即不太会改变的样式不要使用行内style
形式,避免运行时重复渲染,而需要动态发生变化的采取行内方式,比如:style="width:{ {myWidth}};color:{ {myColor}};"
,列表中的焦点行,获取到焦点时改变其宽度和字体颜色,就只要把这两个属性放到行内去运行时渲染。
例子: (预期达到的效果:点击表内行,背景框变亮,字体颜色变成白色)
<!--index.wxml--> <view id="ctl-list-date" class="ctl-list-date"> <view bindtap="tapDateRow" wx:for="{ { dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{ { idx}}" class=