微信小程序从底部弹起的滚动选择器 picker 组件

怼烎@ 2021-09-08 01:16 710阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

从底部弹起的滚动选择器。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">header-text</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">选择器的标题，仅安卓可用</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.11.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">mode</td> 
   <td align="left">string</td> 
   <td align="left">selector</td> 
   <td align="left">否</td> 
   <td align="left">选择器类型</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">disabled</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">是否禁用</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindcancel</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">取消选择时触发</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.9.90</a></td> 
  </tr> 
 </tbody> 
</table>

**mode 的合法值**

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">selector</td> 
   <td align="left">普通选择器</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">multiSelector</td> 
   <td align="left">多列选择器</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">time</td> 
   <td align="left">时间选择器</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">date</td> 
   <td align="left">日期选择器</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">region</td> 
   <td align="left">省市区选择器</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

除了上述通用的属性，对于不同的mode，`picker`拥有不同的属性。

**普通选择器：mode = selector**

<table> 
 <thead> 
  <tr> 
   <th align="left">属性名</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">range</td> 
   <td align="left">array/object array</td> 
   <td align="left">[]</td> 
   <td align="left">mode 为 selector 或 multiSelector 时，range 有效</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">range-key</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">value</td> 
   <td align="left">number</td> 
   <td align="left">0</td> 
   <td align="left">表示选择了 range 中的第几个（下标从 0 开始）</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">bindchange</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">value 改变时触发 change 事件，event.detail = {value}</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**多列选择器：mode = multiSelector**

<table> 
 <thead> 
  <tr> 
   <th align="left">属性名</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">range</td> 
   <td align="left">array/object array</td> 
   <td align="left">[]</td> 
   <td align="left">mode 为 selector 或 multiSelector 时，range 有效</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">range-key</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">value</td> 
   <td align="left">array</td> 
   <td align="left">[]</td> 
   <td align="left">表示选择了 range 中的第几个（下标从 0 开始）</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">bindchange</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">value 改变时触发 change 事件，event.detail = {value}</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">bindcolumnchange</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">列改变时触发</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**时间选择器：mode = time**

<table> 
 <thead> 
  <tr> 
   <th align="left">属性名</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">value</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">表示选中的时间，格式为"hh:mm"</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">start</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">表示有效时间范围的开始，字符串格式为"hh:mm"</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">end</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">表示有效时间范围的结束，字符串格式为"hh:mm"</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">bindchange</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">value 改变时触发 change 事件，event.detail = {value}</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**日期选择器：mode = date**

<table> 
 <thead> 
  <tr> 
   <th align="left">属性名</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">value</td> 
   <td align="left">string</td> 
   <td align="left">当天</td> 
   <td align="left">表示选中的日期，格式为"YYYY-MM-DD"</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">start</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">end</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">fields</td> 
   <td align="left">string</td> 
   <td align="left">day</td> 
   <td align="left">有效值 year,month,day，表示选择器的粒度</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">bindchange</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">value 改变时触发 change 事件，event.detail = {value}</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

*fields 有效值：*\*

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">year</td> 
   <td align="left">选择器粒度为年</td> 
  </tr> 
  <tr> 
   <td align="left">month</td> 
   <td align="left">选择器粒度为月份</td> 
  </tr> 
  <tr> 
   <td align="left">day</td> 
   <td align="left">选择器粒度为天</td> 
  </tr> 
 </tbody> 
</table>

**省市区选择器：mode = region [1.4.0][]**

<table> 
 <thead> 
  <tr> 
   <th align="left">属性名</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">value</td> 
   <td align="left">array</td> 
   <td align="left">[]</td> 
   <td align="left">表示选中的省市区，默认选中每一列的第一个值</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">custom-item</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">可为每一列的顶部添加一个自定义的项</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.5.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindchange</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">value 改变时触发 change 事件，event.detail = {value, code, postcode}，其中字段 code 是统计用区划代码，postcode 是邮政编码</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**示例代码**

[在开发者工具中预览效果][Link 1]

index.wxml

<view class="section">
      <view class="section__title">普通选择器</view>
      <picker bindchange="bindPickerChange" value="{ {index}}" range="{ {array}}">
        <view class="picker">
          当前选择：{
       {array[index]}}
        </view>
      </picker>
    </view>
    <view class="section">
      <view class="section__title">多列选择器</view>
      <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{ {multiIndex}}" range="{ {multiArray}}">
        <view class="picker">
          当前选择：{
       {multiArray[0][multiIndex[0]]}}，{
       {multiArray[1][multiIndex[1]]}}，{
       {multiArray[2][multiIndex[2]]}}
        </view>
      </picker>
    </view>
    <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>

index.js

Page({ 
      data: { 
        array: ['美国', '中国', '巴西', '日本'],
        objectArray: [
          { 
            id: 0,
            name: '美国'
          },
          { 
            id: 1,
            name: '中国'
          },
          { 
            id: 2,
            name: '巴西'
          },
          { 
            id: 3,
            name: '日本'
          }
        ],
        index: 0,
        multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
        objectMultiArray: [
          [
            { 
              id: 0,
              name: '无脊柱动物'
            },
            { 
              id: 1,
              name: '脊柱动物'
            }
          ], [
            { 
              id: 0,
              name: '扁性动物'
            },
            { 
              id: 1,
              name: '线形动物'
            },
            { 
              id: 2,
              name: '环节动物'
            },
            { 
              id: 3,
              name: '软体动物'
            },
            { 
              id: 3,
              name: '节肢动物'
            }
          ], [
            { 
              id: 0,
              name: '猪肉绦虫'
            },
            { 
              id: 1,
              name: '吸血虫'
            }
          ]
        ],
        multiIndex: [0, 0, 0],
        date: '2016-09-01',
        time: '12:01',
        region: ['广东省', '广州市', '海珠区'],
        customItem: '全部'
      },
      bindPickerChange: function (e) { 
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({ 
          index: e.detail.value
        })
      },
      bindMultiPickerChange: function (e) { 
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({ 
          multiIndex: e.detail.value
        })
      },
      bindMultiPickerColumnChange: function (e) { 
        console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
        var data = { 
          multiArray: this.data.multiArray,
          multiIndex: this.data.multiIndex
        };
        data.multiIndex[e.detail.column] = e.detail.value;
        switch (e.detail.column) { 
          case 0:
            switch (data.multiIndex[0]) { 
              case 0:
                data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
                data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                break;
              case 1:
                data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
                data.multiArray[2] = ['鲫鱼', '带鱼'];
                break;
            }
            data.multiIndex[1] = 0;
            data.multiIndex[2] = 0;
            break;
          case 1:
            switch (data.multiIndex[0]) { 
              case 0:
                switch (data.multiIndex[1]) { 
                  case 0:
                    data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                    break;
                  case 1:
                    data.multiArray[2] = ['蛔虫'];
                    break;
                  case 2:
                    data.multiArray[2] = ['蚂蚁', '蚂蟥'];
                    break;
                  case 3:
                    data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
                    break;
                  case 4:
                    data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
                    break;
                }
                break;
              case 1:
                switch (data.multiIndex[1]) { 
                  case 0:
                    data.multiArray[2] = ['鲫鱼', '带鱼'];
                    break;
                  case 1:
                    data.multiArray[2] = ['青蛙', '娃娃鱼'];
                    break;
                  case 2:
                    data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                    break;
                }
                break;
            }
            data.multiIndex[2] = 0;
            console.log(data.multiIndex);
            break;
        }
        this.setData(data);
      },
      bindDateChange: function (e) { 
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({ 
          date: e.detail.value
        })
      },
      bindTimeChange: function (e) { 
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({ 
          time: e.detail.value
        })
      },
      bindRegionChange: function (e) { 
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({ 
          region: e.detail.value
        })
      }
    })

运行结果：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aq95WUcj-1622384776091)(image-20210529134951696.png)\]][img-aq95WUcj-1622384776091_image-20210529134951696.png]

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[1.4.0]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
[Link 1]: https://developers.weixin.qq.com/s/pZb21cmH6qYX
[img-aq95WUcj-1622384776091_image-20210529134951696.png]: /images/20210716/76685d83ac8442049f6658d831e984e6.png