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

本文介绍了微信小程序中三种点击控件修改样式的实现方式。第一种是通过数据绑定和三目运算符判断;第二种利用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

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值