微信小程序-bindtap事件点击改变样式【亲测有效】

已于 2022-04-23 15:01:20 修改
阅读量6.3k 收藏 22
点赞数 4
分类专栏： 微信小程序实战 文章标签： 微信小程序 微信小程序点击样式修改
于 2020-03-19 11:56:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43970743/article/details/104963823
版权
本文介绍了在微信小程序开发中，如何在用户点击按钮时改变按钮样式，提供了四种亲测有效的实现方式，包括数据绑定、直接设置class等。此外，作者分享了实战经验和资源获取途径，并鼓励读者探讨更优解决方案。
摘要由CSDN通过智能技术生成

👨‍🎓作者：bug菌

✏️博客：CSDN、掘金等

💌公众号：猿圈奇妙屋

🚫特别声明：原创不易，转载请附上原文出处链接和本文声明，谢谢配合。

🙏版权声明：文章里可能部分文字或者图片来源于互联网或者百度百科，如有侵权请联系bug菌处理。

一、前言🔥

        日常开发微信小程序，很多场景会遇到这样一种需求，要求你点击某个摁钮改变摁钮样式或者弹框展示/切换，像这种需求，我是不知道遇到了有多少，实现的思路也是总结了好几种，不知道对于你们而言，你们是否有像我想的这样呢？

了解本专栏 订阅专栏 解锁全文 超级会员免费看
bug菌¹
关注
专栏目录
订阅专栏
微信小程序 动态绑定事件并实现事件修改样式
12-28
微信小程序 动态绑定事件并实现事件修改样式 实例代码 wxml <text type=primary style=width:{{itemWidth}}rpx; bindtap=bind{{item.id}} data-typeid={{item.id}} class={{curre
wxml修改样式_微信小程序 动态绑定事件并实现事件修改样式
weixin_42361708的博客
12-23 257
微信小程序 动态绑定事件并实现事件修改样式实例代码wxml{{item.name}}jsvar reportTypeList = [{ name: "日报1", id: "1" },{ name: "目录2", id: "2" },{ name: "季报3", id: "3" },{ name: "月报4", id: "4" },{ name: "日报5", id: "5" },{ name: "...
微信小程序主题切换
最新发布
qq_37764714的博客
07-03 272
【代码】微信小程序主题切换。
微信小程序中点击后的按钮样式
qq_58800537的博客
02-21 890
按钮点击后的变换
微信小程序 点击切换样式妙方
leo编程博客
09-11 1212
普通的web开发可以通过JavaScript获取HTML的Dom结构，但是小程序不可以，小程序实现此功能的方式：数据绑定+data- 去更改标签类名。 step 1 给选定的标志 {{}} & data-num 此处只绑定了一个类名，也可以绑定N个类名。 class='class1 class2 {{num==1?"active":""}}' <view class='oil_s' catchtap='changeOil'> <view class='{{num==1?
微信小程序循环点击切换样式
huai42717的博客
01-08 1143
【代码】微信小程序循环点击切换样式。
微信小程序-简易音乐音乐源码.zip
03-27
【微信小程序-简易音乐音乐源码.zip】是一个包含微信小程序开发的源代码包，主要用于创建一个简单的音乐播放应用。这个项目对于学习微信小程序的开发、音频处理以及移动应用设计具有很高的参考价值。以下是对其中...
084-微信小程序-京东首页demo.zip
06-11
【微信小程序-京东首页demo】是一个关于如何构建类似京东商城首页的小程序的示例项目，包含源代码和相关的截图，旨在帮助开发者理解并学习微信小程序的开发技术。在这个项目中，我们将深入探讨微信小程序的基本结构...
微信小程序 点击切换样式scroll-view实现代码实例
10-16
总结起来，本文提供的代码实例展示了如何在微信小程序中利用`scroll-view`组件实现点击切换样式的功能。通过结合`<scroll-view>`的滚动特性，动态改变CSS类，以及事件处理函数，我们可以创建出具有交互性的导航栏。...
微信小程序中多个button/view组件中进行切换时改变样式
03-29
微信小程序 | 多个按钮或VIEW，点击改变状态 简易的实现方法实现效果：背景图片：.wxml文件view plaincopyviewclass="chose-txt"data-price="{{item.price}}"data-id="{{index}}"bindtap="choseTxtColor"style="{{in ...       1、微信小程序 | 多个按钮或VIEW，点击改变状态 简易的实现方法 (此图片来源于网络，如有侵权，请联系删除! ) .wxml文件   [html] view plain copy <view class="chose-txt" data-pric
微信小程序实现点击效果
12-10
微信小程序动画之点击效果的具体代码，供大家参考，具体内容如下 代码： js： // pages/test/test.js Page({ containerTap: function (res) { var that = this var x = res.touches[0].pageX; var y = res.touches[0].pageY + 85; this.setData({ rippleStyle: '' }); setTimeout(function () { that.setData({ rippleStyle: 'top:
微信小程序按钮点击动画效果的实现
10-16
主要介绍了微信小程序按钮点击动画效果的实现,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
【微信小程序】列表渲染，点击切换样式
做一个有趣的妞儿
10-08 580
【代码】【微信小程序】列表渲染，点击切换样式。
微信小程序按钮点击时的样式hover-class=“hover“
Hero_rong的博客
04-25 1167
关键代码就是小程序的hover-class 属性，需要注意的是，hover-class 的属性中的样式必须加!important 不然没有不显示效果
微信小程序开发--3.3导航栏点击样式变动
weixin_46479909的博客
07-12 195
1.TabCur下方样式变化。
微信小程序点击控件修改样式
热门推荐
Syleapn的博客
03-14 1万+
通常，页面呈现的效果，我们直接在css中进行，可是有时我们需要进行通过一系列操作比如点击后，要使得样式进行改变。我们知道微信小程序也可以使用一些伪类进行这类操作样式的改变，比如hover等。毕竟小程序是基于数据驱动的，也为了便于后续修改与维护，我们利用数据绑定来实现它。******第一种方法******one-&gt;进行布局wxml：&lt;view class="mn"&gt;点击样式改变&l...
微信小程序点击改变css,微信小程序按钮button样式修改自定义
weixin_36353849的博客
08-04 5172
在微信小程序中，当我们向页面中插入一个按扭button的时侯只需要简单的代码就可以了。插入button按钮并保存后，便可以以预览界面看到一个原始的按钮。小程序样式修改默认没有对按钮设置任何样式时，按钮占用整个一行，而按钮可点区域居中，使用控制台中的选择工具，选择这个按钮，查看一下按钮的默认样式。可以看到默认样式下有主要有button:not、button、button:after几个来控制按钮的样...
微信小程序点击事件交互实战解析
本文重点介绍了微信小程序中的事件交互操作，特别是点击事件的处理，以及如何通过WXML、WXSS和JS三者配合实现用户界面与逻辑的互动。" 在微信小程序中，事件是指用户与屏幕进行的各种交互操作，如点击、滑动等。...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bug菌¹

你的鼓励将是我创作的最大动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值