如图所示,当后台返回的状态status 为 0,1 ,2,3 时。前端展示为图上所示,使用微信的wxs文件的方法将使其变得更加简便
新建一个wxs文件,例如
function status(id) {
var statusJson = {};
var x = "";
var y = "";
switch (id) {
case 0:
x = "塞红包";
y = "#EB5F39";
break;
case 1:
x = "进行中";
y = "#1AAD19";
break;
case 2:
x = "已结束";
y = "#B2B2B2";
break;
case 3:
x = "待支付";
y = "#EB5F39";
break;
case 4:
x = "未抢完,已退回";
y = "#B2B2B2";
break;
}
statusJson.x = x;
statusJson.y = y;
return statusJson;
}
在wxs文件里面封装一个函数,通过后台返回的数值,return 不同的 文字以及颜色色号
一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。
module.exports = {
status: status
}
然后在wxml里面引入
<wxs src='../../utils/filter.wxs' module='filters' />
<text class='status' style='color:{{filters.status(item.status).y}}'>{{filters.status(item.status).x}}</text>
参数一一对应即可