> 选择器（相当于web的下拉框）在表单功能模块中是十分常用的组建，以下代码来自hello uniapp供大家参考
> 官方文档：https://uniapp.dcloud.io/component/picker
[TOC]
## 普通选择器
~~~
<template>
<view class="page">
<view class="uni-title">普通选择器</view>
<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
<view class="uni-input">{{array[index].name}}</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
array: [{name:'中国'},{name: '美国'}, {name:'巴西'}, {name:'日本'}],
index: 0
}
},
methods: {
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为：' + e.detail.value)
this.index = e.detail.value
}
}
}
</script>
~~~
## 时间选择器
~~~
<template>
<view class="page">
<view class="uni-title">时间选择器</view>
<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
<view class="uni-input">{{time}}</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
time: '12:01'
}
},
methods: {
bindTimeChange: function(e) {
console.log('picker发送选择改变，携带值为：' + e.detail.value)
this.time = e.detail.value
}
}
}
</script>
~~~
## 日期选择器
~~~
<template>
<view class="page">
<view class="uni-title">日期选择器</view>
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" style="margin-bottom: 50rpx;">
<view class="uni-input">{{date}}</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
date: getDate('now'),
startDate:getDate('start'),
endDate:getDate('end')
}
},
methods: {
bindDateChange: function(e) {
console.log('picker发送选择改变，携带值为：' + e.detail.value)
this.date = e.detail.value
}
}
}
function getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
</script>
~~~
## 多列选择器（省市区三级联动例子）
~~~
<template>
<view class="page">
<view class="uni-title">多列选择器</view>
<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray" style="margin-bottom: 50rpx;">
<view class="uni-input">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
// multiArray 为初始化数据，不管以后用户是否已有数据，再进行初始化，都以该初始化数据为准，这样逻辑实现才会更清晰
// 默认让服务端提供 第1列的数据，然后根据第1列数据的第1条数据，再次请求第2列、第3列的数据列表
multiArray: [
['亚洲', '欧洲'],
['中国', '日本'],
['北京', '上海', '广州']
],
multiIndex: [0, 0, 0]
}
},
methods: {
bindMultiPickerColumnChange: function(e) {
console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
this.multiIndex[e.detail.column] = e.detail.value;
let firstIndex = this.multiIndex[0];
if (e.detail.column == 0) { //拖动第1列
if (firstIndex == 0) { // 第1列如果是“亚洲”，后续的数据初始化
// 选中第1列的第1条数据，则需将第2列以及第3列数据进行初始化，一般都是通过请求服务端数据，这里写静态数据仅供参考
this.multiArray[1] = ['中国', '日本']
this.multiArray[2] = ['北京', '上海', '广州']
}else if (firstIndex == 1) { // 第1列如果是“欧洲”，后续的数据初始化
// 选中第1列的第2条数据，则需将第2列以及第3列数据进行初始化，一般都是通过请求服务端数据，这里写静态数据仅供参考
this.multiArray[1] = ['英国', '法国']
this.multiArray[2] = ['伦敦', '曼彻斯特']
}
this.multiIndex.splice(1, 1, 0); //将multiIndex数据中的第2列初始化
this.multiIndex.splice(2, 1, 0); //将multiIndex数据中第3列初始化
}else if (e.detail.column == 1){ //拖动第2列
let secondIndex = this.multiIndex[1]
if (firstIndex == 0) { // 第1列如果是“亚洲”，后续的数据初始化
if (secondIndex == 0) { // 第2列是“中国”，后续的数据初始化
this.multiArray[2] = ['北京', '上海', '广州']
}else if (secondIndex == 1) { // 第2列是“日本”，后续的数据初始化
this.multiArray[2] = ['东京','北海道']
}
}else if (firstIndex == 1) {
if (secondIndex == 0) {
this.multiArray[2] = ['伦敦', '曼彻斯特']
}else if (secondIndex == 1) {
this.multiArray[2] = ['巴黎', '马赛']
}
}
this.multiIndex.splice(2, 1, 0)
}
// 有时候你会碰到数据已经更新了但是组件还是没有刷新，这个时候需要调用$forceUpdate()强制刷新
this.$forceUpdate();
}
}
}
</script>
~~~
- 基础知识
- UNI核心介绍
- flex布局
- 生命周期
- 全局方法
- 组件定义
- 自定义组件
- 全局组件
- 组件之间的数据传输
- 条件编译
- 自定义头部
- 节点信息 (SelectorQuery)
- vuejs基础语法
- 页面跳转以及参数传递
- 事件的监听注册以及触发
- css3动画
- block的妙用
- mixin (混入)
- uniapp快捷键
- vuex状态管理
- 实用功能
- 获取服务提供商
- 启动页 / 启动界面
- 引导页
- tabbar配置
- 头部导航栏基础设置
- 上拉下拉（刷新/加载）
- 第三方登录
- 第三方分享
- 推送通知 之 unipush
- scroll-view双联动
- 配置iOS通用链接（Universal Links）
- 本地缓存操作
- 升级/更新方案
- 热更新
- 图片上传
- 搜索页实现
- canvas绘图助手
- 地图定位
- 第三方支付————todo
- 分类轮播
- 清除应用缓存
- uniapp与webview的实时通讯
- 视频-----todo
- 聊天----todo
- 长列表swiper左右切换
- 第三方插件
- uview
- mescroll
- uCharts (图表)
- 无名 (更新插件)
- 第三方模版
- 自定义基座
- 打包发行
- 要封装的方法
- 缓存 cache.js
- 请求接口 request.js
- 工具类 util.js
- 小程序登录 xcxLogin.js
- 版本更新 update.js
- 优质插件
- 更新插件----todo
- 语音
- 语音识别 (含上传)
- 百度语音合成播报接口
- 官方常用组建
- input 输入框
- image 图片
- audio 音频
- picker 选择器
- video 视频
- scroll-view 滚动视图