微信小程序的點擊事件怎么實現

這篇文章主要講解了“微信小程序的點擊事件怎么實現”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序的點擊事件怎么實現”吧！

如果需要實現進來進行給按鈕加上買一送一的樣式，或者單擊就選中單個按鈕，只能靠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.       }

感謝各位的閱讀，以上就是“微信小程序的點擊事件怎么實現”的內容了，經過本文的學習后，相信大家對微信小程序的點擊事件怎么實現這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！