微信小程序--動態添加class樣式

尺寸單位：

• rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。所以用rpx可解決適配問題

樣式導入：

/** app.wxss **/
@import "common.wxss";

內聯樣式：

框架組件上支持使用 style、class 屬性來控制組件的樣式。

• style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在運行時會進行解析，請盡量避免將靜態的樣式寫進 style 中，以免影響渲染速度。

<view style="color:{{color}};" />

• class：用於指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。

<view class="normal_view" />

動態添加class樣式：

<button bindtap="bindTabTap" class="btn1 {{signItem.class}}" data-index="{{signItem}}">{{signItem.state}}</button>

//添加class樣式
        for (var i = 0; i < list.length; ++i) {
          if (list[i].status === 1) {   //當狀態為1的時候顯示已簽，返回okSigin的class樣式，class在wxss已設置
            list[i].class = 'okSigin';
            list[i].state = '已簽';
            continue;
          }
          list[i].class = 'noSigin';  //當狀態為0的時候顯示未簽，返回noSigin的class樣式，class在wxss已設置
          list[i].state = '未簽';
        }

當簽到狀態是已簽時，禁止用戶再次簽到（點擊）

wxml:

<button bindtap="redirect" data-text="{{signItem.text}}" data-type="{{signItem.type}}" data-state="{{signItem.state}}" hover-class="none">   //設置button
    <view class="scroll">
      <view class="radius1"></view>
      <text class="text1">{{signItem.text}}</text>
      <button bindtap="bindTabTap" class="btn1 {{signItem.class}}" data-index="{{signItem}}">{{signItem.state}}</button>
    </view>
    </button>

//點擊button
redirect :function (e) {
    var text = e.target.dataset.text;
    var type = e.target.dataset.type;
    var state = e.target.dataset.state;
    if (state === '已簽') {    //已簽狀態是，禁止用戶再次簽到
      return;
    }
    wx.navigateTo({
      url: '../signInDetails/signInDetails?text=' + text + '&&type=' + type,   //頁面傳參到下一個頁面
      success: function(res){
        // success
       
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },

下一個頁面接收參數：

 <view class="scroll">{{text}}<span style="display:none">{{type}}</span></view>

 var text = options.text;
    var type = options.type;
    that.setData({
      text: text,
      type: type
    })