微信小程序——列表只可多选,只能选择3项
微信小程序 | December 11, 2020
文章链接:https://blog.csdn.net/qq_43201350/article/details/111035643
wxml文件
<view class="demo-page">
<view class="btn-group" wx:for="{{list}}" wx:key="index">
<button class="mini-btn {{item.isChecked ? 'active': ''}}" data-id="{{item.id}}" data-index="{{index}}"
data-isChecked="{{item.isChecked}}" bindtap="selectFarmer" data-text="{{item.type}}">{{item.type}}
<iconfont name="iconduigou1" class="iconduigou1" wx:if="{{item.isChecked}}"></iconfont>
</button>
</view>
</view>
js文件
Page({
data: {
name: [],
list: [{
id: 0,
type: 'aa',
isChecked: false
},
{
id: 1,
type: 'bb',
isChecked: false
},
{
id: 2,
type: 'cc',
isChecked: false
},
{
id: 3,
type: 'dd',
isChecked: false
}
],
},
select: function (e) {
const that = this
const currItem = that.data.list.find(item => e.currentTarget.dataset.id == item.id)
if (!currItem.isChecked && that.data.name.length >= 3) {
wx.showToast({
title: '最多只能选三项!',
icon: 'none'
})
} else {
currItem.isChecked = !currItem.isChecked
if (currItem.isChecked) {
that.setData({
abc: currItem.type,
name: [...that.data.name, currItem.type]
})
that.setData({
clickFilterFalg: true
})
wx.setStorageSync('clickFilterFalg', that.data.clickFilterFalg)
} else {
const findIndex = that.data.name.findIndex(item => item == currItem.type)
if (findIndex >= 0) {
that.data.name.splice(findIndex, 1)
}
}
}
that.setData({
list: that.data.list
})
},
})
效果
