微信小程序picker滚动选择器使用详解

picker基础使用

picker滚动选择器(下简称picker)是微信小程序自带的组件,无需引入任何文件,只要在适当的位置放入picker代码点击后就可以从底部弹起的滚动选择器。

<picker>最简单使用</picker>

当然我没有定义数据,所以选择器里面是没有内容的。

picker赋值

如何给上面的滚动选择器里面赋上值呢?使用range就可以在滚动选择器里面加入选择内容。

<picker range="{
  {['1','2','3']}}">range赋值</picker>

当然也可以绑定数据,但要注意的是数据只能是["1","2","3"]这种格式数组。

多列picker选择器

上面的滚动选择器只有一列,有时候我们需要两列或者多列该如何使用呢?

  • 5
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序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 的逻辑分离开来,使代码更加清晰易懂。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值