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

妖狐艹你老母 2022-05-27 04:07 500阅读 0赞

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

在wxss中定义被点击和未被点击的样式，如下：

**\[css\]**  [view plain][]  [copy][view plain]

1.  .is\_checked\{  
2.    color: \#FE0002 ;  
3.    background: \#fff;  
4.  \}  
5.  .normal\{  
6.    color: \#333;  
7.    background: \#F0F1EC;  
8.  \}

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

**\[html\]**  [view plain][]  [copy][view plain]

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][view plain 1]  [copy][view plain 1]

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选择器属性值，从而改变页面显示效果**

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

*  *`WXS`增强了`wxml`的功能，相当于页面中的脚本语言，我们可以将比如检查手机格式的函数放在`wxs`中来使用（根据是否正确来改变相应的样式），而不用跑到在`js`中去检查。`wxs`目前似乎并不支持`ES6`（至少`let`不能使用）`wxs`文件不能被`js`文件引用。`wxs`文件能引用`wxs`文件。*

[view plain]: https://blog.csdn.net/nongweiyilady/article/details/74011337#
[view plain 1]: https://blog.csdn.net/weixin_39872588/article/details/79608221#