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

最新推荐文章于 2024-10-08 09:35:00 发布

Syleapn

最新推荐文章于 2024-10-08 09:35:00 发布

阅读量1.9w

点赞数 9

分类专栏：微信小程序文章标签：微信小程序样式改变数据绑定点击事件

本文链接：https://blog.csdn.net/Syleapn/article/details/79556940

版权

本文介绍了微信小程序中三种点击控件修改样式的实现方式。第一种是通过数据绑定和三目运算符判断；第二种利用wxss配合wxml和js实现；第三种方法将样式直接写在wxml，不推荐用于正式项目。总结中强调了在wxss和wxml中绑定数据、事件以及在js中处理的方法适用于大多数情况，而针对图片变化的情况，第二种方法更为适用。

摘要由CSDN通过智能技术生成

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

布好局与样式准备好后，怎样进行样式的改变呢&#x

最低0.47元/天解锁文章

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

******第一种方法******

第一种方法