微信小程序的点击事件怎么实现

这篇文章主要讲解了“微信小程序的点击事件怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“微信小程序的点击事件怎么实现”吧！

如果需要实现进来进行给按钮加上买一送一的样式，或者单击就选中单个按钮，只能靠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.       }

感谢各位的阅读，以上就是“微信小程序的点击事件怎么实现”的内容了，经过本文的学习后，相信大家对微信小程序的点击事件怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！