微信小程序多项选择与删除功能

废话不多数直接上代码！这是你们希望看到的吧，其实我也是懒，懒得想去说什么了。

 

wxml代码：

<view class="report-reason-list" >

<text wx:for = "{{items}}" wx:key="{{index}}" data-selected="{{index}}" class="{{isSelecte[index].selected ? 'cur' : ''}}" bindtap='chooseReason' data-index='{{index}}'> {{item.name}} </text>

</view>

样式就自己写吧（我太懒了）。

js代码：

items:[{ name: '交费入门'},{ name: '拉人头发展下线或代理' },{ name: '组成层级团队计酬' },{ name: '虚假宣传疗效' },{ name: '夸大宣传' },{ name: '宣称高利益' },{ name: '宣称只涨不跌' },{ name: '宣称利益保障' },{ name: '宣称金融互助' },{ name: '宣称爱心慈善模式' },{ name: '宣称消费返利' },{ name: '宣称游戏理财' },{ name: '宣称拆分盘模式' },{ name: '宣称原始股投资' },{ name: '山寨虚拟币区块链' },],

isSelecte: [{ selected: false },{ selected: false },{ selected: false },{ selected: false },{ selected: false },{ selected: false },{ selected: false },{ selected: false },{ selected: false },{ selected: false },{ selected: false },{ selected: false },{ selected: false },{ selected: false },]

（为了方便查看，都写在一行了）

data:{

reasonList: [],

}

chooseReason:function(e){

let that = this;

let event = e.currentTarget.dataset;

let index = event.index;

let copyeone = this.data.isSelecte

copyeone[index].selected = !copyeone[index].selected;

this.setData({

isSelecte: copyeone

})

//以下是这是过滤有效的被点击元素

let len = that.data.isSelecte.length;

let copytwo = [];

for (let i = 0; i < len; i++) {

if (that.data.isSelecte[i].selected) {

copytwo.push(that.data.items[i].name);

}

}

that.setData({

reasonList: copytwo

})

},

ok代码完成，讲解重点。

此处为思路：

第一步，将多选列表渲染（好像说的是废话）

第二步，将class做三目运算，isSelecte[index].selected == true即添加事先写好的类名“cur”

第三步，js部分，在绑定事件chooseReason中，获取当前事件的索引值，同时用copyone数组保存或者说是过渡数组存放目标元素，改变数组copyone中对应的selected值为反（这样做的目的是即可以添加多选，又可以删除多选），最后把copyone在setData中传递给原数组isSelecte（我自己给它起名叫整体化一思想，因为各种尝试后发现setData中无法使用类似copyone[index].selected这样的结构，只能存放变量）。

第四步：过滤有效的被点击元素，也就是以上紫色代码

最后reasonList才是多选出来的元素集合数组。

遂整个过程到此结束。

多谢观赏。