<view>
<view class="page__hd">
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">多选项</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="多选项" bindinput="countInput" value='{{ count }}'/>
</view>
</view>
</view>
<view class='member' wx:for = "{{ members}}" wx:for-item = "member" wx:key="*this" data-id="{{ member.id }}" bindtap='click'>
<view>
<text>{{ member.name }}</text>
<wxs module="tools" src="../../utils/arrayFilter.wxs"></wxs>
<image wx-if="{{tools.isInArray(member.id,selecteds) == true}}" class='selected' src="../../imgs/selected.png" mode="cover"></image>
</view>
</view>
</view>
</view>
const app = getApp()
Page({
data: {
members: [
{
id : 1,
name: '雨雨'
},
{
id: 2,
name: '苏苏'
},
{
id: 3,
name: '哈哈'
},
{
id: 4,
name: '嘻嘻'
},
{
id: 5,
name: '呵呵'
},
{
id: 6,
name: '兔兔'
}
],
count: 2,
selecteds: []
},
click: function (e) {
let id = e.currentTarget.dataset.id;
let array = this.data.selecteds;
if (this.isInArray(id, array) == true) {
console.log('id:' + id +'已经被选中')
} else {
if (array.length >= this.data.count) {
array.shift();
}
array.push(id)
}
this.setData({
selecteds: array
})
},
isInArray: function (value, array) {
for (var i = 0; i < array.length; i++) {
if (value == array[i]) {
return true;
}
}
return false;
},
countInput: function (e) {
this.setData({
count: e.detail.value
})
}
})
.member{
background-color: white;
margin-top: 5px;
padding: 10px;
font-size: 14px;
}
.selected {
width: 48rpx;
height: 48rpx;
float: right;
}
var isInArray = function (value, array) {
for (var i = 0; i < array.length; i++) {
if (value == array[i]) {
return true;
}
}
return false;
}
module.exports = {
isInArray: isInArray
}
Demo地址:https://github.com/niezhiliang/selected-many-demo