注冊

微信小程序點擊事件,小程序button或view后選中其它反選

2020-09-27
導讀：如果需要實現(xiàn)進來進行給按鈕加上買一送一的樣式，或者單擊就選中單個按鈕，只能靠css結合js進行控制了，小程序暫時沒有這樣的控件。 66666313.png (13.97 KB, 下載次數(shù): 71) 下載附件 保存...
如果需要實現(xiàn)進來進行給按鈕加上買一送一的樣式，或者單擊就選中單個按鈕，只能靠css結合js進行控制了，小程序暫時沒有這樣的控件。
微信小程序進來的時候自動進行按鈕樣式的初始化，這個需要一個字段做判斷，加上正則表達式wxml文件：

微信小程序點擊事件,小程序button或view后選中其它反選

  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. }
現(xiàn)在的方法把集合進行循環(huán)，然后獲取當前點擊的這個按鈕進行比較，然后進行樣式的修改

  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.       }

重磅推薦：小程序開店目錄

第一部分：小商店是什么

第二部分：如何開通一個小商店

第三部分：如何登錄小商店

第四部分：開店任務常見問題

第五部分：小商店可以賣什么

第六部分：HiShop小程序特色功能

第七部分：小程序直播

第八部分：小程序收貨/物流

第九部分：小程序怎么結算

第十部分：小程序客服

第十一部分：電商創(chuàng)業(yè)

第十二部分：小程序游戲開發(fā)