uni-halo/.agents/bak-skills/uniappx-project/examples/components/built-in/picker.md

picker 组件示例

官方文档

参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/picker.html

概述

picker 是滚动选择器组件，支持普通选择器、多列选择器、时间选择器、日期选择器等。

基础用法

<template>
  <picker mode="selector" :range="options" @change="handleChange">
    <view>请选择</view>
  </picker>
</template>

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3']
    }
  },
  methods: {
    handleChange(e) {
      console.log('选中的索引', e.detail.value)
    }
  }
}
</script>

完整示例

示例 1: 普通选择器

<template>
  <view class="container">
    <picker 
      mode="selector" 
      :range="options"
      :value="selectedIndex"
      @change="handleChange"
    >
      <view class="picker-view">
        <text>{{ selectedText || '请选择' }}</text>
        <text class="arrow">></text>
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3', '选项4'],
      selectedIndex: 0,
      selectedText: ''
    }
  },
  methods: {
    handleChange(e) {
      this.selectedIndex = e.detail.value
      this.selectedText = this.options[e.detail.value]
      console.log('选中的值', this.selectedText)
    }
  }
}
</script>

<style>
.picker-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}
.arrow {
  color: #999;
}
</style>

示例 2: 多列选择器

<template>
  <view class="container">
    <picker 
      mode="multiSelector" 
      :range="multiArray"
      :value="multiIndex"
      @change="handleMultiChange"
      @columnchange="handleColumnChange"
    >
      <view class="picker-view">
        <text>{{ displayText || '请选择省市区' }}</text>
        <text class="arrow">></text>
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      multiArray: [
        ['北京', '上海', '广东'],
        ['朝阳区', '海淀区', '丰台区'],
        ['街道1', '街道2', '街道3']
      ],
      multiIndex: [0, 0, 0],
      displayText: ''
    }
  },
  methods: {
    handleMultiChange(e) {
      this.multiIndex = e.detail.value
      this.updateDisplayText()
    },
    handleColumnChange(e) {
      // 当某一列改变时，可以更新其他列的数据
      const column = e.detail.column
      const row = e.detail.value
      this.multiIndex[column] = row
      this.updateDisplayText()
    },
    updateDisplayText() {
      this.displayText = this.multiArray.map((arr, index) => {
        return arr[this.multiIndex[index]]
      }).join(' ')
    }
  }
}
</script>

示例 3: 时间选择器

<template>
  <view class="container">
    <picker 
      mode="time" 
      :value="time"
      @change="handleTimeChange"
    >
      <view class="picker-view">
        <text>{{ time || '请选择时间' }}</text>
        <text class="arrow">></text>
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      time: ''
    }
  },
  methods: {
    handleTimeChange(e) {
      this.time = e.detail.value
      console.log('选择的时间', this.time)
    }
  }
}
</script>

示例 4: 日期选择器

<template>
  <view class="container">
    <picker 
      mode="date" 
      :value="date"
      :start="startDate"
      :end="endDate"
      @change="handleDateChange"
    >
      <view class="picker-view">
        <text>{{ date || '请选择日期' }}</text>
        <text class="arrow">></text>
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      startDate: '2020-01-01',
      endDate: '2030-12-31'
    }
  },
  methods: {
    handleDateChange(e) {
      this.date = e.detail.value
      console.log('选择的日期', this.date)
    }
  }
}
</script>

示例 5: 地区选择器

<template>
  <view class="container">
    <picker 
      mode="region" 
      :value="region"
      @change="handleRegionChange"
    >
      <view class="picker-view">
        <text>{{ regionText || '请选择地区' }}</text>
        <text class="arrow">></text>
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      region: [],
      regionText: ''
    }
  },
  methods: {
    handleRegionChange(e) {
      this.region = e.detail.value
      this.regionText = e.detail.value.join(' ')
      console.log('选择的地区', this.region)
    }
  }
}
</script>

属性说明

属性名	类型	默认值	说明
mode	String	selector	选择器类型，可选值：selector、multiSelector、time、date、region
range	Array	[]	mode 为 selector 或 multiSelector 时，range 有效
value	Number/Array	0	表示选择了 range 中的第几个（下标从 0 开始）
start	String	-	有效值范围的开始，字符串格式为 "YYYY-MM-DD"
end	String	-	有效值范围的结束，字符串格式为 "YYYY-MM-DD"

平台兼容性

平台	支持情况
H5	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅
QQ 小程序	✅
快手小程序	✅
App	✅
快应用	✅

注意事项

1. mode 不同，range 和 value 的格式也不同
2. 时间选择器的 value 格式为 "HH:mm"
3. 日期选择器的 value 格式为 "YYYY-MM-DD"
4. 多列选择器需要配合 @columnchange 事件处理联动

参考资源

• 官方文档: https://doc.dcloud.net.cn/uni-app-x/component/picker.html
• 滚动选择器: https://doc.dcloud.net.cn/uni-app-x/component/picker-view.html