微信小程序 picker 组件的各类模式应用介绍与案例精讲

非 VIP 用户可前往公众号“前端基地”进行免费阅读，文章链接如下：

微信小程序 picker 组件的各类模式应用介绍与案例精讲

目录

picker介绍

普通选择器：mode = selector

多列选择器：mode = multiSelector

日期选择器：mode = date

时间选择器：mode = time

省市区选择器：mode = region

---

picker介绍

---

        Picker 是一种从底部弹起的滚动选择器，常用于在移动端应用中提供用户选择功能。它支持多种选择模式，如普通选择器、多列选择器、时间选择器、日期选择器和省市区选择器等。

        通用属性介绍：

属性	描述
header-text	选择器的标题，仅在安卓平台上可用。
mode	选择器类型，可选值包括：selector（普通选择器）、multiSelector（多列选择器）、time（时间选择器）、date（日期选择器）、region（省市区选择器）。
disabled	是否禁用选择器。
bindcancel	当用户取消选择时触发的事件。

普通选择器：mode = selector

---

        普通选择器是最常用的选择器类型，适用于从一组选项中选择一个值。以下是一个简单的示例代码，展示了如何使用普通选择器。

        示例代码如下：

        picker.wxss

.select {
  height: 90rpx;
  line-height:90rpx;
  text-align: left;
  color: #4b4b4b;
  border:2rpx solid #ccc;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAAXNSR0IArs4c6QAAADBJREFUGFdjnDlzZj0DA0MDA3bQwAgSx6GoIT09vRGsAIsisCRIHK4ASREDTBIkBgBfgBFPppFflwAAAABJRU5ErkJggg==) no-repeat 95% 45rpx; 
  margin-bottom: 40rpx;
  padding-left:20rpx;
}

        说明：定义了选择器的样式，包括高度、边框、背景图标等。

        picker.wxml

<view class="w">
  <view class="title">普通选择器：mode = selector</view>
  <picker mode="selector" value="{
  {index}}" bindchange="bindSelectorChange" range="{
  {arr}}">
    <view class='select'>{
  {arr[index]}}</view>
  </picker>
</view>

        说明：使用 <picker> 组件创建了一个普通选择器，range 属性绑定了数据源 arr，value 属性绑定了当前选中的索引 index，bindchange 事件绑定了 bindSelectorChange 方法。

        picker.js

Page({
  data:{
    arr:['武汉','上海','广州'],// 选择器的选项数组
    index:0// 当前选中的索引
  },
  bindSelectorChange(e){
    console.log(e.detail.value)// 打印当前选中的值
    this.setData({
      index:e.detail.value// 更新选中的索引
    })
  }
})

        说明：定义了页面的数据和方法，arr 是选择器的选项数组，index 是当前选中的索引，bindSelectorChange 方法用于处理选择器值的变化，并更新 index。

        属性介绍：

属性	描述
range	当 mode 为 selector 或 multiSelector 时，range 有效，表示选择器的选项列表（默认值为空数组 []）。
range-key	当 range 是一个对象数组时，通过 range-key 指定对象中某个键的值作为选择器显示的内容。