微信小程序选择器picker的使用(省市区)

index.wxml
picker中的 mode=region模式,这里同element中的select不同的是,不需要自己在绑定数据原,默认就包含了省市区的整体数据

<view class="section">
  <view class="section__title">省市区选择器</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      当前选择:{{region[0]}}{{region[1]}}{{region[2]}}
    </view>
  </picker>
</view>

index.js

// pages/temp/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    region:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  bindRegionChange(e){
      this.setData({
        region : e.detail.value
      })

  },
  })

下图是选择时打印e的结果
在这里插入图片描述
字段的解释如下
在微信小程序中,当用户在省市区选择器中进行选择后,会触发一个change事件,事件对象中包含了一些属性,其中的参数含义如下:

1.currentTarget: 表示当前触发事件的组件,包含了组件的一些属性信息,比如id、offsetLeft(相对于视口的左边距)、offsetTop(相对于视口的上边距)等。
2.detail: 表示事件对象的详细信息,包含了用户选择的数据以及其他相关信息。
3.code: 表示省市区的代码,是一个数组,依次代表省、市、区的代码。
4.postcode: 表示邮政编码,即所选地区的邮政编码。
5.value: 表示用户选择的省市区名称,也是一个数组,依次代表省、市、区的名称。
6.mark: 一个空对象,可能用于存储一些额外的标记信息。
7.mut: 一个布尔值,表示是否已经处理过该事件。
8.target: 事件的真正触发目标,与currentTarget可能不同。
9.timeStamp: 事件触发的时间戳。
10.type: 事件类型,即"change"。
11._userTap: 一个布尔值,表示用户是否触发了该事件。

微信小程序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 的逻辑分离开来,使代码更加清晰易懂。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值