小程序class参数

刺骨的言语ヽ痛彻心扉 2022-05-09 16:36 144阅读 0赞

写了一个关于排序 第一至第三 不同颜色的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;
    }

// 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 () {
    
      }
    })