小程序|自定义icon多选框

2020-08-18  本文已影响0人  歌声缓缓

wxml页面

<view class="list" >

              <view class="item" wx:for="{{list}}">

                  <view bindtap="selectedItem" class="icon_box" data-index="{{index}}">

                        <icon color="#0033AB" size="16" type="success" wx:if="{{item.selected}}"></icon>

                        <icon color="#DCDCDC" size="16" type="success" wx:if="{{!item.selected}}"></icon>

                  </view>

                    <view class="name">

                          {{item.name}}

                    </view> 

              </view>

          </view>

js页面

data: {

      list:[

        {"selected":true,"name":"520520520"},

        {"selected":true,"name":"520520520"},

        {"selected":true,"name":"520520520"},

        {"selected":true,"name":"520520520"},

        {"selected":true,"name":"520520520"},

        {"selected":true,"name":"520520520"},

        {"selected":true,"name":"520520520"}

      ]}

selectedItem: function (a) {

    var e = a.currentTarget.dataset.index;

    if(_this.data.list[e].selected){

      var temp_list=[];

      temp_list=_this.data.list;

      temp_list[e].selected=false;

      _this.setData({

        list:temp_list

      })

    }else{

      var temp_list = [];

      temp_list = _this.data.list;

      temp_list[e].selected = true;

      _this.setData({

        list: temp_list

      })

    }

  },

上一篇 下一篇

猜你喜欢

热点阅读