微信小程序 自定義單選復選按鈕組的實現(用於實現購物車產品列表功能)

 

（一）單選按鈕組

模型圖如下： 

index.js

Page({
  data: {
    parameter: [{ id: 1, name: '銀色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模擬商品參數數據，如果是線上版本需要自行發起request請求
  },
  onLoad: function (options) {
     this.data.parameter[0].checked = true;
    this.setData({
      parameter: this.data.parameter,
    })//默認parameter數組的第一個對象是選中的
  },
   // 參數點擊響應事件
  parameterTap:function(e){//e是獲取e.currentTarget.dataset.id所以是必備的，跟前端的data-id獲取的方式差不多
    var that=this
    var this_checked = e.currentTarget.dataset.id
    var parameterList = this.data.parameter//獲取Json數組
    for (var i = 0; i < parameterList.length;i++){
      if (parameterList[i].id == this_checked){
        parameterList[i].checked = true;//當前點擊的位置為true即選中
      }
      else{
        parameterList[i].checked = false;//其他的位置為false
      }
    }
    that.setData({
      parameter: parameterList
    })
  }
})

index.wxml

<view class='fwb fz-28 mgt-16 mgb-10'>規格</view>
  <view class='parameter-wrap'>
    <block wx:for="{{parameter}}" wx:key="parameter">
    <text class='parameter-info text-over {{item.checked?"checked_parameter":""}}' data-id='{{item.id}}' bindtap='parameterTap'>{{item.name}}</text>
    </block>
  </view>

index.wxss

.checked_parameter{
  background: rebeccapurple;
  padding: 3px;
  border-radius: 5px;
  color: #fff;
}

 

Tips:此處的{{item.checked?”checked_parameter”:”“}}為三元選擇器，即通過checked判斷當前是否為選中樣式，而后進行樣式的添加checked_parameter。

 

（二）多選按鈕組

模型圖如下：

cartList.js

Page({
    data:{
    CartList:[],//做空處理，如果購物車為空后端的值沒有改變，容易產生報錯
　　//測試數據:CartList: [{id: 1, name: '銀色', checked: false},{id: 2, name: '白色', checked: false},{id: 3, name: '黑色', checked: true}]

    },
      onLoad: function () {
    // 獲取購物車請求
    var that = this;
    wx.request({
      url: request_getCartList,//向后端發起請求，此處的是get的方式，如需要ajax請參照本站內的相關文章
      data: {
        "session3rd": userid,
      },
      success: function (res) {
        if (res.data.code == -2) {
          that.setData({
            CartList: []
          })
        }
        if(res.data.code==1){
          that.setData({
            CartList: list
          })
         }
       }
    })
  },
    // 多選
  chooseOs: function (event) {
    for (var i = 0; i < this.data.CartList.length; i++) {
      if (event.currentTarget.id == this.data.CartList[i].id) {
        if (this.data.CartList[i].checked == true) {
          this.data.CartList[i].checked = false;
          var CartList = this.data.CartList;
          this.setData({
            CartList//重定義CartList，使購物車的樣式實現局部刷新
          })
        } else {
          this.data.CartList[i].checked = true;
          var CartList = this.data.CartList;
          this.setData({
            CartListt//重定義CartList，使購物車的樣式實現局部刷新
          })
        }
      }
    }
  },
})

cartList.wxml

  <block wx:for="{{CartList}}" wx:key="">
    <view class="order-out user-shadow mgb-20 nowrap">
      <view class="check-btn" catchtap='chooseOs' id="{{item.id}}">
        <image class="absoult-v" src="{{imgSrc}}{{item.checked?'type_1':'type_0'}}.png" mode="widthFix"></image>
      </view>

    </view>
  </block>

Tips:前端頁面通過catchtap的事件捕捉的方式，調用chooseOs的方法，獲取當前點擊對象的id即id=”{{item.id}}”，然后對選中的事件添加樣式this.data.CartList[i].checked = true;，對未選中的事件刪除樣式this.data.CartList[i].checked = false;

 

（三）復選拓展-全選全不選

 

cart.xml

 <view class="all-btn" bindtap='allCheckTap' wx:if="{{!checked}}">
    <image src="{{imgSrc}}{{checked?'type_1':'type_0'}}.png" mode="widthFix"></image>
    <text>全選</text>
  </view>

  <view class="all-btn" bindtap='allCheckTap' wx:if="{{checked}}">
    <image src="{{imgSrc}}{{checked?'type_1':'type_0'}}.png" mode="widthFix"></image>
    <text>全不選</text>
  </view>

Tips:此處的‘全選’和‘全不選’沒有合並，需要小碼農們自行整合。 

cartList.js

// 全選按鈕
  allCheckTap: function () {
    this.setData({
      checked: !this.data.checked,
    })
    if (this.data.checked) {
      for (var i = 0; i < this.data.CartList.length; i++) {
        if (this.data.CartList[i].checked !== true) {
          this.data.CartList[i].checked = true;
          var CartList = this.data.CartList;
          this.setData({
            CartList
          })
        }
      }
    }
    else {
      for (var i = 0; i < this.data.CartList.length; i++) {
        if (this.data.CartList[i].checked == true) {
          this.data.CartList[i].checked = false;
          var CartList = this.data.CartList;
          this.setData({
            CartList
          })
        }
      }
    }
  },

tips:全選跟全部不選的邏輯比較簡單就是，將所有所有的checked循環遍歷this.data.CartList[i].checked == true或false,然后通過this.setData({CartList})重新定義一下，實現局部刷新。

 

 

轉 : https://blog.csdn.net/qq_38209578/article/details/78810981