微信小程序checkbox如何變小

這篇“微信小程序checkbox如何變小”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序checkbox如何變小”文章吧。

微信小程序checkbox怎么變小通過serviceValChange來監(jiān)聽所有checkbox的變化，監(jiān)聽函數(shù)通過e.dtail.value得到一個被選中的數(shù)組，通過選中數(shù)組checkArr[]，來給原先的數(shù)據(jù)數(shù)組allGoodFilter[]的被選中對象的check屬性置true，沒有被選中的置false，在我們的wxml中，通過判斷每個對象的checked屬性來給他一個"is_checked"的class。

wxml代碼：

<checkbox-group bindchange="serviceValChange">

        <view class="service_selection flex">

          <block wx:for="{{allGoodsFilte}}">

            <view class=" item">

              <label class="checkbox {{item.checked?'is_checked':''}}">

                <checkbox value="{{item.value}}" checked="{{item.checked}}" hidden="false" />{{item.name}}

              </label>

            </view>

          </block>

        </view>

</checkbox-group>

wxss代碼：

.flex{

  flex-direction: row;

}

.flex .item{

  flex: 1

}

.service_selection {

  padding: 15px 10px;

  background: #fff;

}

.service_selection label {

  background: #f0f1ec;

  padding: 6px 7px;

  font-size: 12px;

  border-radius: 4px;

}

.service_selection .is_checked {

  border: 1px solid #fe0002;

  color: #fe0002;

  background: #fff;

}

js代碼：

首先是數(shù)據(jù)：

 data: {

    allGoodsFilte: [

      { name: '專人配送', value: '0', checked: true },

      { name: '精品品牌', value: '1', checked: false },

      { name: '超值優(yōu)惠', value: '2', checked: false },

      { name: '門店自提', value: '3', checked: false },

      { name: '最快三小時', value: '4', checked: false },

    ],

綁定的checkbox監(jiān)聽函數(shù)：

 serviceValChange: function (e) {

    var allGoodsFilte = this.data.allGoodsFilte;

    var checkArr = e.detail.value;

    for (var i = 0; i < allGoodsFilte.length; i++) {

      if (checkArr.indexOf(i + "") != -1) {

        allGoodsFilte[i].checked = true;

      } else {

        allGoodsFilte[i].checked = false;

      }

    }

    this.setData({

      allGoodsFilte: allGoodsFilte

    })

  }

以上就是關(guān)于“微信小程序checkbox如何變小”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。