微信小程序改变wxss样式

由于在微信小程序的开发中不可以使用原生js的Dom操作和jQuery，所以不能直接使用dom或jQuery改变样式。下面以一个简单的切换背景颜色例子(类似开关灯)来解决这个问题。使用的方法很简单，就是利用自定义属性data-id和三目运算来解决。首先，先看效果图

js代码

Page({
  data:{
    num:0
  },

  onClick:function(event){
    // 获取按钮的自定义属性值 data-id
    var Id = event.target.dataset.id;
    // 判断
    if (Id == 0){
      // 给num属性赋值
      this.setData({
        num: 1
      })
    }else {
      // 给num属性赋值
      this.setData({
        num: 0
      })
    }
  
  }
})

wxml代码

<view>
   <!--  data-id="0"  自定义属性  -->
    <!-- {{num == '0' ? '':'active' }}  三目运算 -->
    <view 
      bindtap="onClick" 
      data-id="{{num}}"
      class="btn-toggle {{num == '0' ? '':'active' }}"></view>
</view>

wxss代码

.btn-toggle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: block;
  margin:50px auto;
  background-color: #ccc;
}
.active {
  background-color: red;
}