微信小程序點擊控件修改樣式

通常，頁面呈現的效果，我們直接在css中進行，可是有時我們需要進行通過一系列操作比如點擊後，要使得樣式進行改變。我們知道微信小程序也可以使用一些僞類進行這類操作樣式的改變，比如hover等。畢竟小程序是基於數據驅動的，也爲了便於後續修改與維護，我們利用數據綁定來實現它。

******第一種方法******

one->進行佈局wxml：

<view class="mn">點擊樣式改變</view> 

two->樣式美化wxss：

.mn{
  width: 300rpx ;
  height: 80rpx;
  border: 1rpx solid red;
  line-height: 80rpx;
  text-align: center;
  margin-left: 100rpx;
}

未點擊時的樣式

.bg1{
  background-color: yellow;
  color: coral;
}

點擊以後的樣式

.bg2{
  background-color: green;
  color: white;
}

three->樣式改變js：

布好局與樣式準備好後，怎樣進行樣式的改變呢？在wxml中綁定數據(數據綁定的方法很多，比如像下面的三目運算符判斷，也可以直接綁定單個變量，在data設置出它的初始值，然後通過setData改變值等，實現過程不同，最終的結果都可以達到相同)，並綁定點擊事件。

<view class="mn {{bg?'bg1':'bg2'}}" bindtap="change">點擊樣式改變</view> 

綁定好事件後，我們在js中實現這個方法。

Page({
  data: {
  // 一開始，我們將bg設爲true，通過bg?'bg1':'bg2'得知，未點擊時效果爲bg1
   bg: true
  },
  // 當點擊以後， bg由true變爲false，通過bg?'bg1':'bg2'得知，點擊以後的效果爲bg2
  change: function(){  
    this.setData({
      bg: false
    })
  }  
})    

four->最後，得到我們想要的效果，如下：

*******第二種方法******

     此外，除了上述三目運算符數據綁定的方式外，我們還可以這樣綁定數據等等:

wxml代碼：

<view class="mn {{bg}}" bindtap="change">點擊樣式改變</view> 

wxss代碼：

.mn{
  width: 300rpx ;
  height: 80rpx;
  border: 1rpx solid red;
  line-height: 80rpx;
  text-align: center;
  margin-left: 100rpx;
}
/* 未點擊時的樣式 */
.bg1{
  background-color: yellow;
  color: coral;
}
/* 點擊以後的樣式 */
.bg2{
  background-color: green;
  color: white;
}

js代碼：

Page({
  data: {
    bg:"bg1"
  },
  change: function(){  
    this.setData({
      bg:"bg2"
    })
  }  
})    

效果與上面一樣：

說明：這種方法對於實現與圖片相關的改變，非常好，我們知道在微信小程序中，wxss不能直接添加圖片。

wxml代碼：

<view class="Img" bindtap="change" style="background:url({{url}}) no-repeat">圖片</view> 

wxss代碼：

.Img{
  width: 160rpx ;
  height: 60rpx;
  border: 1rpx solid green;
  text-align: center;
  margin-left: 100rpx;
  font-size: 28rpx;
}

js代碼：

Page({
  data: {
    url:"../../images/reserve1.png"
  },
  change: function(){  
    this.setData({
      url: "../../images/reserve2.png"
    })
  }  
})    

效果（點擊前後）:

******第三種方法******

說明：對於改變控件樣式，除了像上面這樣外，我們還可以把樣式直接寫在wxml，像下面這樣

<view class="ch" bindtap="change" style="{{bg?'color:red':'color:green'}}">改變</view> 

.ch{
  width: 160rpx ;
  height: 60rpx;
  border: 1rpx solid green;
  text-align: center;
  margin-left: 100rpx;
  font-size: 28rpx;
}

Page({
  data: {
   bg:true
  },
  change: function(){  
    this.setData({
      bg:false
    })
  }  
})    

效果（點擊前後）：

     ------>這種方法不太推薦使用，一般用來測試，不利於代碼維護。

******總結@當樣式要發生改變時******

對於直接的樣式wxss,我們就用第一與第二種方法------>在wxss中寫好需要的樣式，在wxml中進行數據綁定與事件綁定，在js中實現；

對於圖片相關的，我們就用第二種方法；

第三種不太推薦。