小程序多选代码怎么设置

时间:2025-01-28 07:20:01 单机游戏

在微信小程序中设置多选代码,可以通过以下两种方法实现:

方法一:使用`checkbox-group`和`checkbox`标签

WXML结构

```html

{{item.title}}

```

JS逻辑

```javascript

Page({

data: {

options: [

{ value: '商品品质', title: '商品品质' },

{ value: '眉笔质地', title: '眉笔质地' },

{ value: '最新', title: '最新' },

{ value: '正品', title: '正品' },

{ value: '包装完整', title: '包装完整' },

{ value: '是否防水', title: '是否防水' },

{ value: '其他', title: '其他' }

],

selectedOptions: []

},

checkboxChange(e) {

const selectedOptions = e.detail.value;

this.setData({ selectedOptions });

}

});

```

方法二:使用自定义组件

自定义组件WXML

```html

{{item.title}}

```

自定义组件JS

```javascript

// custom-checkbox-group.js

Component({

properties: {

options: {

type: Array,

value: []

}

},

data: {

checkedOptions: []

},

methods: {

checkboxChange(e) {

const selectedOptions = e.detail.value;

this.triggerEvent('chang', { selectedOptions });

}

}

});

```

使用自定义组件

```html

```

这两种方法都可以实现微信小程序中的多选功能,选择哪种方法取决于你的具体需求和偏好。