三级全黄做爰电影_夫妻之间那些事_啊啊啊啊好爽视频_国产精品xxxx喷水欧美_色一情一乱一伦麻豆_国产精品美乳一区二区免费_亚洲综合av在线在线播放_人与禽伦性了_黄色软件色多多_av在线免费观看网址

在微信小程序開發(fā)購(gòu)物車功能時(shí)，全選，單選是基本需要的功能，一般有的作者喜歡用radio組件實(shí)現(xiàn)，有的喜歡用checkbox組件實(shí)現(xiàn)，本篇文章講解的是radio組件的實(shí)現(xiàn)原理及代碼，好，馬上進(jìn)入正題。

radio組件全選按鈕功能實(shí)現(xiàn)

上圖中商品列表的左邊radio組件就是全選按鈕，實(shí)現(xiàn)思路是：當(dāng)所有子項(xiàng)都選中時(shí)，顯示選中狀態(tài)，否則為不選中狀態(tài)。未選中狀態(tài)時(shí)點(diǎn)擊操作，把所有子項(xiàng)都所中。選中狀態(tài)點(diǎn)擊操作，把所有子項(xiàng)都不選中。

邏輯講完上簡(jiǎn)化后主要邏輯代碼：

先是wxml:

<radio value="0" checked="{{allchecked}}" bindtap="selectAll" color="#d81e06" />商品列表

<view class="car-list" wx:for="{{car_list}}" wx:key="index" wx:for-item="item">

<radio checked="{{item.selected}}" bindtap="selectList" data-index="{{index}}" color="#d81e06" />{{item.title}}

</view>

allchecked是控制全選的選中狀態(tài)的變量，selectAll是全選的點(diǎn)擊事件，selectlist是子項(xiàng)點(diǎn)擊事件。

再是js代碼：

data: {

    car_list: [],

    allchecked: false,

},

// 全選事件

  selectAll(e) {

    // 是否全選狀態(tài)

    var selectAllStatus = this.data.allchecked;

    selectAllStatus = !selectAllStatus;

    var dataList = this.data.car_list;

    for (let i = 0; i < dataList .length; i++) {

      // 改變所有商品狀態(tài)

      dataList [i].selected = selectAllStatus;

    }

    this.setData({

      allchecked: selectAllStatus,

      car_list: dataList,

    });

  },

// 選擇事件

  selectList(e) {

    // 獲取data- 傳進(jìn)來(lái)的index

    let index = e.currentTarget.dataset.index;

    // 獲取購(gòu)物車列表

    let dataArr = this.data.car_list;

    // 獲取當(dāng)前商品的選中狀態(tài)

    let selected = dataArr[index].selected;

    // 改變狀態(tài)

    dataArr[index].selected = !selected;

    this.setData({

      car_list: dataArr

    });

    // 改變?nèi)x狀態(tài)

    for (var i = 0; i < this.data.car_list.length; i++) {

      // 當(dāng)狀態(tài)為全選時(shí)，每個(gè)元素其中有一個(gè)為false，則取消全選

      // 當(dāng)狀態(tài)為非全選時(shí)，每個(gè)元素都為true，則全選

      if (this.data.allchecked) {

        if (!this.data.car_list[i].selected) {

          this.setData({

            allchecked: false

          });

          break;

        }

      } else {

        if (this.data.car_list[i].selected) {

          this.setData({

            allchecked: true

          });

        } else {

          this.setData({

            allchecked: false

          });

          break;

        }

      }

    }

  },

通過(guò)以上代碼就能實(shí)現(xiàn)微信小程序radio組件的全選，單選功能實(shí)現(xiàn)，其中car_list是從服務(wù)器加載商品列表，這里如何獲取數(shù)據(jù)就不在本篇講解了。