小程序class参数

 写了一个关于排序 第一至第三 不同颜色的demo 很简单，万变不离其宗。随便改改就可以用了

.tp2-main{
  width: 100%;
  background-color: white;
  border-bottom: 1rpx solid #ccc;
 }
 .flex1{
  display: flex;
  flex-wrap: nowrap;
  padding: 10rpx;
  align-items: center;
  justify-content: space-between;
}
.c1{
  color: red;
  font-weight: 900; 
}
.c2{
  color: yellow;
  font-weight: 800; 
}
.c3{
  color: blue;
  font-weight: 700; 
}
.cf{
  color: #ccc;
}

<view class='tp2-main'>
  <view class='flex1' wx:for="{{list}}">
    <view class="{{item.sx === 1 ? 'c1': item.sx === 2 ? 'c2': item.sx === 3 ? 'c3':'cf' }}">{{item.sx}}</view>
    <view>{{item.name}}</view>
  </view>
</view>

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {name:"我是第一"},
      { name: "我是第二" },  
      { name: "我是第三" },  
      { name: "我是第四" },  
      { name: "我是第五" },  
       
            ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    var list = this.data.list;
    for(let i = 0 ; i < list.length; i++){
      list[i].sx = i+1
    }
    that.setData({
      list:list
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})