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

落日映苍穹つ 2022-05-29 01:37 746阅读 0赞

通常，页面呈现的效果，我们直接在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->最后，得到我们想要的效果，如下：

![Image 1][]

#### \*\*\*\*\*\*\*第二种方法\*\*\*\*\*\* ####

* * * *此外，除了上述三目运算符数据绑定的方式外，我们还可以这样绑定数据等等:

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代码：

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"
        })
      }  
    })

效果（点击前后）:

![Image 1][]

#### \*\*\*\*\*\*第三种方法\*\*\*\*\*\* ####

说明：对于改变控件样式，除了像上面这样外，我们还可以把样式直接写在wxml，像下面这样

.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
        })
      }  
    })

效果（点击前后）：

![Image 1][]

*   ------>*这种方法不太推荐使用，一般用来测试，不利于代码维护。

#### \*\*\*\*\*\*总结@当样式要发生改变时\*\*\*\*\*\* ####

对于直接的样式wxss,我们就用第一与第二种方法------>在wxss中写好需要的样式，在wxml中进行数据绑定与事件绑定，在js中实现；

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

第三种不太推荐。

[Image 1]: