【快速文档】picker标签，在小程序中添加一个滚动选择器-CSDN博客

本文链接：https://blog.csdn.net/wechat_wuming/article/details/120632943

本文详细介绍了小程序中picker组件的使用，包括通用参数、普通选择器、多列选择器、日期与时间选择器及省市区选择器。重点讲解了mode、range、value、bindchange等参数的用法，以及如何处理数据和事件响应，特别是当使用对象数组时如何通过range-key指定显示值。还提供了相关wxml和js代码示例。

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

通用参数

mode 选择模式

1，selector 普通选择器，注意，这是默认选项，不用填写

2，mutiSelector 多列选择器

3，date 日期选择器

4，time 时间选择器

5，region 省市区选择器

bindcancel 绑定取消事件

普通选择器

就是一个单列的选择器

range 这里面要填写一个数组，注意，是数组，不是长得像数组的字符串

value 选择了range中的第几个，注意，从0开始

bindchange 绑定变化事件

range-key 如果你使用了对象数组，那么可以通过该参数指定一个显示的key

注意：通过e.detail.value得到的是数组的字符串的下标值，无法得知range中的内容，因此，在使用普通选择器的时候，应该通过data传递数据，不应该直接写在wxml里面。

wxml的代码如下

<picker range="{{ mouse }}" bindchange="selector_change">普通选择器</picker>
<view wx:if="{{ d }}">您选择的是：{{ d }}</view>

js的代码如下

Page({
  data: {
    mouse: ["1", "2", "3", "4", "5", "上山", "打", "老鼠"],
    d: ""
  },
  onLoad: function (options) {
    
  },
  selector_change(e){
    this.setData({d: this.data.mouse[e.detail.value]});
  }
})

刚刚我们说到了e.detail.value得到的是一个字符串，对，它确实是一个字符串，但是在js里面，通过字符串的数字去作为一个数组的下标去取一个数组中的值，也是可以的。这是什么操作？大概就是在js中，如果你使用了字符串的数字作为数组下标，那么js会将其转换为数字类型。所以说，这种操作是可以做到的。并不一定要手动将字符串数字转换为数字。

关于刚刚提到了一个参数叫做range-key，这个指的是，如果你使用的是一个包含了很多对象的数组，那么，你可以通过range-key指定一个属性，作为滚动选择器的显示值。

range-key的使用wxml代码如下

<picker range="{{ m }}" range-key="name" bindchange="selector_change2">普通选择器2</picker>
<view wx:if="{{ age }}">您查看的人物，年龄为：{{ age }}</view>

range-key的使用js代码如下

Page({
  data: {
    m: [
      {"name": "zhangfei", "age": "30"},
      {"name": "guanyu", "age": "32"},
      {"name": "sunwukong", "age": 888}
    ],
    age: ""
  },
  onLoad: function (options) {

  },
  selector_change2(e){
    this.setData({age: this.data.m[e.detail.value].age});
  }
})