微信小程序点击控件修改样式

通常，页面呈现的效果，我们直接在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中实现；

对于图片相关的，我们就用第二种方法；

第三种不太推荐。