根据不同status 状态参数动态展⽰不同css 样式
第⼀种：两种不同状态切换显⽰，在class 属性中使⽤三⽬运算符动态选择Class 属性即可在wxss中定义被点击和未被点击的样式，如下：
cssclass属性依然是在wxml⽂件中进⾏数据绑定：
第⼆种：两种以上状态切换显⽰，在style 属性或者class 属性中调⽤⽅法返回不同值来实现
情况A：在wxs⽂件⾥⾯封装⼀个函数，函数名为selectStatus，参数是后台返回的状态码数值，return ⼀个对象（本例包含x和y两个属性，代表不同的 ⽂字以及颜⾊⾊号）当后台返回的状态status 为 0,1 ，2，3 时。返回不同的颜⾊和⽂字即可
情况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 ⽂件。[css]
1. .is_checked{
2.  color : #FE0002 ;
3.  background : #fff;
4. }
5. .normal{
6.  color : #333;
7.  background : #F0F1EC;
8. }
[html]
1. <view  class ="{{isChecked?'is_checked':'normal'}}" bindtap ="serviceSelection"></view>  [html]
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。