微信小程序picker选择器使用工厂模式
时间: 2023-08-31 20:10:39 浏览: 55
微信小程序的 picker 组件是一个常用的 UI 组件,用于从多个选项中选择一个或多个选项。工厂模式是一种创建对象的设计模式,它可以将对象的创建和使用分离开来,提高代码的可维护性和可扩展性。
下面是一个使用工厂模式创建 picker 组件的示例代码:
```javascript
// picker 工厂类
class PickerFactory {
static createPicker(options) {
// 根据传入的 options,创建不同类型的 picker
switch(options.type) {
case 'single':
return new SinglePicker(options);
case 'multi':
return new MultiPicker(options);
default:
throw new Error('Unsupported picker type');
}
}
}
// 单选 picker 类
class SinglePicker {
constructor(options) {
this.options = options;
}
show() {
wx.showActionSheet({
itemList: this.options.items,
success: res => {
const selected = this.options.items[res.tapIndex];
this.options.onSelect(selected);
}
});
}
}
// 多选 picker 类
class MultiPicker {
constructor(options) {
this.options = options;
}
show() {
wx.showActionSheet({
itemList: this.options.items,
success: res => {
const selected = res.tapIndex.map(index => this.options.items[index]);
this.options.onSelect(selected);
}
});
}
}
// 使用示例
const singlePicker = PickerFactory.createPicker({
type: 'single',
items: ['选项一', '选项二', '选项三'],
onSelect: selected => {
console.log(`Selected: ${selected}`);
}
});
singlePicker.show();
const multiPicker = PickerFactory.createPicker({
type: 'multi',
items: ['选项一', '选项二', '选项三'],
onSelect: selected => {
console.log(`Selected: ${selected}`);
}
});
multiPicker.show();
```
在上面的代码中,我们首先定义了一个 picker 工厂类 `PickerFactory`,它有一个静态方法 `createPicker`,根据传入的参数 `options`,可以创建不同类型的 picker。这里我们定义了两个 picker 类 `SinglePicker` 和 `MultiPicker`,它们分别用于创建单选 picker 和多选 picker。这两个类都有一个 `show` 方法,用于显示 picker,并在选项选择后调用传入的回调函数 `onSelect`。
在使用时,我们可以通过 `PickerFactory.createPicker` 方法创建不同类型的 picker,然后调用 `show` 方法显示 picker。这样我们可以将创建 picker 的逻辑和使用 picker 的逻辑分离开来,使代码更加清晰易懂。