微信小程序--picker

最新推荐文章于 2025-06-22 21:21:52 发布

原创最新推荐文章于 2025-06-22 21:21:52 发布 · 714 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #小程序 #picker #选择器 #时间

本文详细介绍了小程序中picker组件的应用及实现方式，包括普通选择器、多列选择器、时间选择器、日期选择器和省市区选择器等五种类型，并通过实例展示了如何使用这些选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在为发现小程序官方提供了picker后，毅然决然得放弃了摆弄了一天的纯js选择器，因为我发现在手写的选择器下，文本框的

 placeholder 属性的显示层数超过我设置的模态，而文本域则直接是最高级的显示层，如果你的选择器在文本域上将直接点击到文本域，

无法选择。这时我发现了picker。。。

picker官方也给了五种选择器，通过mode区分，分别为普通选择器，多列选择器-multiSelector，时间选择器-time，日期选择器-date，省市区选择器-region，默认是普通选择器。

上代码 //wxml 普通选择器

<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
              <span name="user_level" id="user_level">
                {{array[index]}}
                </span> 
</picker>

//js

data:{

 array:["A", "B", "C", "D", "E", ],
    objectArray: [
      {
        id: 0,
        name: 'A'
      },
      {
        id: 1,
        name: 'B'
      },
      {
        id: 2,
        name: 'C'
      },
      {
        id: 3,
        name: 'D'
      },
      {
        id: 4,
        name: 'E'
      }

    ],
    index: 0,
}

bindPickerChange: function (e) {
    this.setData({
      multiIndex2: e.detail.value
    })
  },

//html

<picker style="width:200px" mode="multiSelector" bindchange="bindMultiPickerChange2" bindcolumnchange="bindMultiPickerColumnChange2" value="{{multiIndex}}" range="{{objectMultiArray}}" range-key="{{'name'}}">
     <span name="user_time" style="margin-left:30%;border-bottom:1px solid #e3e3e3;width:160rpx">
        {{objectMultiArray[0][multiIndex2[0]].name}}-{{objectMultiArray[1][multiIndex2[1]].name}}
    </span>
 </picker>

//js

data:{

 objectMultiArray: [
      [
        {
          id: 0,
          name: '不限'
        },
        {
          id: 1,
          name: '周日'
        },
        {
          id: 0,
          name: '周一'
        },
        {
          id: 1,
          name: '周二'
        },
        {
          id: 2,
          name: '周三'
        },
        {
          id: 3,
          name: '周四'
        },
        {
          id: 3,
          name: '周五'
        },
        {
          id: 3,
          name: '周六'
        }
      ], [
        {
          id: 0,
          name: '不限'
        },
        {
          id: 1,
          name: '早上'
        },
        {
          id: 2,
          name: '上午'
        },
        {
          id: 3,
          name: '中午'
        },
        {
          id: 3,
          name: '下午'
        },
        {
          id: 3,
          name: '晚上'
        }
      ]
    ],
 multiIndex2: [0, 0],
}    

bindMultiPickerColumnChange2: function (e) {
    var data = {
      objectMultiArray: this.data.objectMultiArray,
      multiIndex2: this.data.multiIndex2
    };
    data.multiIndex2[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
      case 0:
        switch (data.multiIndex2[0]) {
          case 0:
            data.objectMultiArray[1] = [
              { id: 0, name: '不限' },
              { id: 1, name: '早上' },
              { id: 2, name: '上午' },
              { id: 3, name: '中午' },
              { id: 4, name: '下午' },
              { id: 5, name: '晚上' },
            ];
            break;
        }
        data.multiIndex2[1] = 0;
        break;
    }
    this.setData(data);
  }

<view class="section">
  <view class="section__title">时间选择器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      当前选择: {{time}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>
<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>