微信小程序的点击事件怎么实现(微信小程序,开发技术)

如果需要实现进来进行给按钮加上买一送一的样式，或者单击就选中单个按钮，只能靠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://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/png/kyqwzj1ej5i.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://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/png/kyqwzj1ej5i.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. }