1. 官方文档使用指南

1. 使用指南：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

2. 功能描述

从底部弹起的滚动选择器

1. 通用属性

属性	类型	默认值	必填	说明	最低版本
header-text	string		否	选择器的标题，仅安卓可用	2.11.0
mode	string	selector	否	选择器类型	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
bindcancel	eventhandle		否	取消选择时触发	1.9.90

2. 普通选择器：mode = selector

	<picker value="{
     
     {index}}" range="{
     
     {array}}" bindchange="bindPickerChange">
		<view>{
   
   {array[index] || '普通选择器'}}</view>
	</picker>

3. 时间选择器：mode = time

	<picker mode="time" value="{
     
     {time}}" bindchange="onTimeChange">
		<view>{
   
   {time || '时间选择器'}}</view>
	</picker>

4. 日期选择器：mode = date

	<picker mode="date" value="{
     
     {date}}" bindchange="onDateChange">
		<view>{
   
   {date || '日期选择器'}}</view>
	</picker>

5. 省市区选择器：mode = region

	<picker mode="region" value="{
     
     {region}}" bindchange="onRegionChange">
		<view>{
   
   {region || '省市区选择器'}}</view>
	</picker>

3. 具体代码逻辑实现

Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    date: null,
    region: null,
    time: null,
    array: ['美国', '中国', '巴西', '日本'],
    index: 0,

  },


  /**
   * 普通选择器事件监听
   */
  bindPickerChange(event) {
    
    
    this.setData({
    
    
      index: event.detail.value
    })
  },


  /**
   * 时间选择器事件监听
   */
  onTimeChange(event) {
    
    
    const time = event.detail.value;
    this.setData({
    
    
      time: time
    })
  },


  /**
   * 日期选择器事件监听
   */
  onDateChange(event) {
    
    
    const date = event.detail.value;
    this.setData({
    
    
      date: date
    })
  },


  /**
   * 省市区选择器事件监听
   */
  onRegionChange(event) {
    
    
    const region = event.detail.value;
    this.setData({
    
    
      region: region
    })
  },
})

4. 运行效果图

5. 关于作者其它项目视频教程介绍

1. Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
2. Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
3. Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
4. Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
5. Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
6. 为什么要封装BaseActivity?: https://www.bilibili.com/video/BV11S411A7R5/?vd_source=984bb03f768809c7d33f20179343d8c8
7. 为什么要封装BaseFragment?：https://www.bilibili.com/video/BV1Um421G7yC/?vd_source=984bb03f768809c7d33f20179343d8c8