微信小程序点击事件,小程序button或view后选中其它反选

发布时间：2023-08-28 22:39:50 作者：zryf2000 阅读量：4972

如果需要实现进来进行给按钮加上买一送一的样式，或者单击就选中单个按钮，只能靠css结合js进行控制了，小程序暂时没有这样的控件。
微信小程序进来的时候自动进行按钮样式的初始化，这个需要一个字段做判断，加上正则表达式wxml文件：

1.           <block wx:for="{{liuliangItems}}">
2.             <block wx:if="{{item.one2one == 1}}">
3.               <button class="{{item.changeColor?'selected2':'selected1'}}" type="default" id="{{item.price}}" data-id="{{item.name}}" data-one="{{item.one2one}}" data-orderid="{{item.id}}" data-number="1" bindtap="setPrice">{{item.name}}</button>
4.             </block>
5.             <block wx:else>
6.               <button class="{{item.changeColor?'selected':'normal'}}" type="default" id="{{item.price}}" data-id="{{item.name}}" data-one="{{item.one2one}}" data-orderid="{{item.id}}" data-number="1" bindtap="setPrice">{{item.name}}</button>
7.             </block>
8.           </block>

复制代码

wxss文件

1. .normal{
2.   box-sizing: border-box;
3.   flex: 0 0 21%;
4.   margin: 5px 5px;
5.   height: 50px;
6.   color:#1aad19;
7.   border:1px solid #1aad19;
8.   background-color:transparent;
9. }
10. .selected{
11.   box-sizing: border-box;
12.   flex: 0 0 21%;
13.   margin: 5px 5px;
14.   height: 50px;
15.   background-color: #F75000;
16.   color: white;
17. }
18. .selected1{
19.   box-sizing: border-box;
20.   flex: 0 0 21%;
21.   margin: 5px 5px;
22.   height: 50px;
23.   background-color: transparent;
24.   border:1px solid #1aad19;
25.   color:#1aad19;
26.   background-image: url(https://wxcx.llzt.net/images/hot.png) ;
27.   background-position:31px 0px;
28.   background-repeat:no-repeat;
29.   background-size:62%;
30. }
31. .selected2{
32.   box-sizing: border-box;
33.   flex: 0 0 21%;
34.   margin: 5px 5px;
35.   height: 50px;
36.   background-color: #F75000;
37.   color: white;
38.   background-image: url(https://wxcx.llzt.net/images/hot.png);
39.   background-position:31px 0px;
40.   background-repeat:no-repeat;
41.   background-size:62%;
42. }

现在的方法把集合进行循环，然后获取当前点击的这个按钮进行比较，然后进行样式的修改

1.       for (var i = 0; i < this.data.liuliangItems.length; i++) {
2.         if (e.target.dataset.orderid == this.data.liuliangItems[i].id) {
3.           txtArray1[i] = {
4.             id: this.data.liuliangItems[i].id, changeColor: true,
5.             price: this.data.liuliangItems[i].price, name: this.data.liuliangItems[i].name,
6.             one2one: this.data.liuliangItems[i].one2one
7.           }
8.         } else {
9.           txtArray1[i] = {
10.             id: this.data.liuliangItems[i].id, changeColor: false,
11.             price: this.data.liuliangItems[i].price, name: this.data.liuliangItems[i].name,
12.             one2one: this.data.liuliangItems[i].one2one
13.           }
14.         }
15.       }

我要评论

网友评论

评论时间：2024-05-09 12:54:02

[1-2]使用说明：在手机上装好Androiduni-app 入门 之后，我们就可以开始使用它来做任原生app和网页app的区别 Android之后，我们就可以开始使用它来做任务

回复

回复 

置顶通知！发帖请务必遵守法律法规

微信支付下载对账单开发CloudPay.downloadBill()

wx.navigateBack(OBJECT),小程序关闭当前页面返回上一页面（1）

如何制作微信小游戏

微信支付查询退款开发CloudPay.queryRefund()

微信小程序尺寸及外边距设置调整技巧

考古APP开发 感受历史的魅力考古APP开发

安全教育app开发解决方案

门店小程序类目资质表

广州APP开发企业APP制作公司

一招告诉你小程序码怎么生成？

一文告诉你为什么鲜花店老板主动要做小程序?

APP制作新功能在搜索里

信息巨头进军企业APP开发

手机APP营销策略的移动互联网时代

手机APP客户端不断升级有什么用处

2013年电商App移动化

企业为什么要开发专属APP？

本地头条新闻APP开发:不用编程,让你一个人顶一个电视台

广州APP开发未来的发展趋势

剖析APP开发跨平台与非跨平台对比

税务app开发 办税无压力税务app开发

微信小程序的制作流程

「体育行业app开发」体育行业app开发谁好？案例跟商业模式