微信小程序——列表只可多选，只能选择3项

最新推荐文章于 2024-09-29 11:23:58 发布

dbt@L

最新推荐文章于 2024-09-29 11:23:58 发布

阅读量819

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_43201350/article/details/111035643

版权

本文介绍了如何在微信小程序中创建一个列表，允许用户进行多选操作，但限制最多只能选择3项。通过结合wxml和js文件的代码实现这一功能，并展示了最终的交互效果。

摘要由CSDN通过智能技术生成

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,