微信小程序,学习笔记(二)样式(WXSS)及一个简单的小测试用例

本文介绍了微信小程序中WXSS的特性和与CSS的差异,并通过一个测试用例展示了如何处理列表行点击后动态改变样式的问题。讨论了数据驱动样式更新的策略,以及在无法直接操作组件的情况下,如何通过数据和行为来实现动态效果。
摘要由CSDN通过智能技术生成

微信小程序,学习笔记(二)样式(WXSS)及一个简单的小测试用例

WXSS(WeiXin Style Sheets)

这东西其实是微信自己的一种 CSS 语言,大部分都还是 CSS 语法,也有自己的东西,主要针对微信自己的 WXML 标记语言而生的,用来丰富其组件的显示效果。

  • WXSS 相对 CSS 并没有太大差别,只是需要注意以下几点

    1. rpx 像素单位,具体值是:1rpx == 0.5px == 1物理像素,物理像素说的是硬件上表达的像素概念;
    2. 样式导入:在WXSS 文件中使用 @import test.wxss; 方式导入,后面的分号不要省略;
    3. 样式使用方式:内联行内,由于组件的 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=
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

若叶岂知秋vip

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值