微信小程序引入wxs文件,根据后台返回数值前端展示不同的文字或颜色.

微信小程序引入wxs文件,根据后台返回数值前端展示不同的文字或颜色._第1张图片

如图所示,当后台返回的状态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里面引入


{{filters.status(item.status).x}}


参数一一对应即可

你可能感兴趣的:(微信小程序)