根据不同status状态参数动态展示不同css样式

第一种:两种不同状态切换显示,在class属性中使用三目运算符动态选择Class属性即可

在wxss中定义被点击和未被点击的样式,如下:

[css]  view plain  copy
  1. .is_checked{  
  2.   color#FE0002 ;  
  3.   background#fff;  
  4. }  
  5. .normal{  
  6.   color#333;  
  7.   background#F0F1EC;  
  8. }  

依然是在wxml文件中进行数据绑定:

[html]  view plain  copy
  1. <view class="{{isChecked?'is_checked':'normal'}}" bindtap="serviceSelection"></view>  

第二种:两种以上状态切换显示,在style属性或者class属性中调用方法返回不同值来实现


情况A:在wxs文件里面封装一个函数,函数名为selectStatus,参数是后台返回的状态码数值,return 一个对象(本例包含x和y两个属性,代表不同的 文字以及颜色色号)当后台返回的状态status 为 0,1 ,2,3 时。返回不同的颜色和文字即可

[html]  view plain  copy
  1. <wxs src='../../utils/filter.wxs' module='filters' />  
  2. <text class='status' style='color:{{filters.selectStatus(item.status).y}}'>{{filters.status(item.status).x}}</text>  
情况B:通过调用方法wxs文件定义好的方法动态返回合适的class选择器属性值,从而改变页面显示效果
<!-- 引入wxs,并设置module名 -->
<wxs src="../../src/wxs/common.wxs" module="util" />
<!-- 通过检测邮箱是否有效,来设置相应的class,再在wxss中写好相应的样式 -->
<input class="email_input {{util.validateEmail(email)?'':'error'}}" placeholder='请输入' value='{{email}}' bindinput='emailInput'> </input>

PS:我们第二种实现基于微信小程序新功能WXS(2017.08.30新增)

  • WXS增强了wxml的功能,相当于页面中的脚本语言,我们可以将比如检查手机格式的函数放在wxs中来使用(根据是否正确来改变相应的样式),而不用跑到在js中去检查。wxs目前似乎并不支持ES6(至少let不能使用)wxs文件不能被js文件引用。wxs文件能引用wxs文件。
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值