美文网首页
小程序|自定义icon多选框

小程序|自定义icon多选框

作者: 歌声缓缓 | 来源:发表于2020-08-18 17:40 被阅读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

      })

    }

  },

相关文章

网友评论

      本文标题:小程序|自定义icon多选框

      本文链接:https://www.haomeiwen.com/subject/brpkjktx.html