uni-app之picker

從底部彈起的滾動選擇器。支持五種選擇器宏侍，通過mode來區(qū)分赖淤，分別是普通選擇器，多列選擇器谅河，時間選擇器咱旱，日期選擇器确丢，省市區(qū)選擇器，默認(rèn)是普通選擇器吐限。

1鲜侥、普通選擇器
mode = selector

屬性說明

屬性名	類型	默認(rèn)值	說明
range	Array / Array＜Object＞	[]	mode為 selector 或 multiSelector 時，range 有效
range-key	String		當(dāng) range 是一個 Array＜Object＞時毯盈，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內(nèi)容
value	Number	0	value 的值表示選擇了 range 中的第幾個（下標(biāo)從 0 開始）
@change	EventHandle		value 改變時觸發(fā) change 事件剃毒，event.detail = {value: value}
disabled	Boolean	false	是否禁用
@cancel	EventHandle		取消選擇或點(diǎn)遮罩層收起 picker 時觸發(fā)

picker在各平臺的實(shí)現(xiàn)是有UI差異的，有的平臺如百度搂赋、支付寶小程序的Android端是從中間彈出的赘阀；有的平臺支持循環(huán)滾動如微信、百度小程序脑奠；有的平臺沒有取消按鈕如App端基公。但均不影響功能使用。

2宋欺、多列選擇器
mode = multiSelector

平臺差異說明

App	H5	微信小程序	支付寶小程序	百度小程序	字節(jié)跳動小程序	QQ小程序
vue支持轰豆，nvue自2.4起支持	√	√	x	√	√	√

支付寶小程序 picker 組件不支持多列選擇，可以使用 picker-view 組件替代齿诞。

屬性說明

屬性名	類型	默認(rèn)值	說明
range	二維 Array / 二維 Array＜Object＞	[]	mode為 selector 或 multiSelector 時酸休，range 有效。二維數(shù)組祷杈，長度表示多少列斑司，數(shù)組的每項(xiàng)表示每列的數(shù)據(jù)，如[["a","b"], ["c","d"]]
range-key	String		當(dāng) range 是一個二維 Array＜Object＞時但汞，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內(nèi)容
value	Array	[]	value 每一項(xiàng)的值表示選擇了 range 對應(yīng)項(xiàng)中的第幾個（下標(biāo)從 0 開始）
@change	EventHandle		value 改變時觸發(fā) change 事件宿刮，event.detail = {value: value}
@columnchange	EventHandle		某一列的值改變時觸發(fā) columnchange 事件，event.detail = {column: column, value: value}私蕾，column 的值表示改變了第幾列（下標(biāo)從0開始）僵缺，value 的值表示變更值的下標(biāo)
@cancel	EventHandle		取消選擇時觸發(fā)
disabled	Boolean	false	是否禁用

bug & tips

由于 JavaScript 的限制 vue 不能觀測如下方式設(shè)置 value：this.value[0] = 0 （vue 注意事項(xiàng)），解決方式參考：hello-uniapp 示例
微信開發(fā)工具的pc模擬器有可能出現(xiàn)拖動數(shù)據(jù)錯亂踩叭，使用真機(jī)正常

3磕潮、時間選擇器
mode = time

平臺差異說明

App	H5	微信小程序	支付寶小程序	百度小程序	字節(jié)跳動小程序	QQ小程序
√	√	√	√	√	√	√

時間選擇在App端調(diào)用的是os的原生時間選擇控件，在不同平臺有不同的ui表現(xiàn)

屬性說明

屬性名	類型	默認(rèn)值	說明	平臺差異說明
value	String		表示選中的時間容贝，格式為"hh:mm"
start	String		表示有效時間范圍的開始自脯，字符串格式為"hh:mm"	App 不支持
end	String		表示有效時間范圍的結(jié)束，字符串格式為"hh:mm"	App 不支持
@change	EventHandle		value 改變時觸發(fā) change 事件嗤疯，event.detail = {value: value}
@cancel	EventHandle		取消選擇時觸發(fā)
disabled	Boolean	false	是否禁用

4冤今、日期選擇器
mode = date

平臺差異說明

App	H5	微信小程序	支付寶小程序	百度小程序	字節(jié)跳動小程序	QQ小程序
√	√	√	√	√	√	√

日期選擇在App端調(diào)用的是os的原生日期選擇控件闺兢，在不同平臺有不同的ui表現(xiàn)茂缚。

屬性說明

屬性名	類型	默認(rèn)值	說明	平臺差異說明
value	String	0	表示選中的日期戏罢，格式為"YYYY-MM-DD"
start	String		表示有效日期范圍的開始，字符串格式為"YYYY-MM-DD"
end	String		表示有效日期范圍的結(jié)束脚囊，字符串格式為"YYYY-MM-DD"
fields	String	day	有效值 year,month,day龟糕，表示選擇器的粒度	H5、App 2.6.3+悔耘、微信小程序讲岁、百度小程序、字節(jié)跳動小程序
@change	EventHandle		value 改變時觸發(fā) change 事件衬以，event.detail = {value: value}
@cancel	EventHandle		取消選擇時觸發(fā)
disabled	Boolean	false	是否禁用

fields 有效值

值	說明
year	選擇器粒度為年
month	選擇器粒度為月份
day	選擇器粒度為天

5缓艳、省市區(qū)選擇器
mode = region

平臺差異說明

App	H5	微信小程序	支付寶小程序	百度小程序	字節(jié)跳動小程序	QQ小程序
x	x	√	x	√	√	√

因省市區(qū)選擇器包含大量數(shù)據(jù)，占用體積看峻，并非所有應(yīng)用都需要阶淘，且很多城市數(shù)據(jù)有自維護(hù)需求，所以在App和H5平臺沒有內(nèi)置互妓∠希可以基于多列picker或picker-view，自行填充城市數(shù)據(jù)冯勉，插件市場有較多類似插件澈蚌，詳見。注意基于多列picker方式的地區(qū)選擇不能運(yùn)行在支付寶小程序上灼狰，只有基于picker-view的可以全端運(yùn)行宛瞄。這些插件中，比較推薦的是SimpleJalon的地址聯(lián)動選擇插件伏嗜，它可以同時兼容app-nvue坛悉、app-vue、h5承绸、及各端小程序裸影。

屬性名	類型	默認(rèn)值	說明
value	Array	[]	表示選中的省市區(qū)，默認(rèn)選中每一列的第一個值
custom-item	String		可為每一列的頂部添加一個自定義的項(xiàng)
@change	EventHandle		value 改變時觸發(fā) change 事件军熏，event.detail = {value: value}
@cancel	EventHandle		取消選擇時觸發(fā)
disabled	Boolean	false	是否禁用

示例查看演示

以下示例代碼轩猩，來自于hello uni-app項(xiàng)目，推薦使用HBuilderX荡澎，新建uni-app項(xiàng)目均践，選擇hello uni-app模板，可直接體驗(yàn)完整示例摩幔。

<!-- 本示例未包含完整css彤委，獲取外鏈css請參考上文，在hello uni-app項(xiàng)目中查看 -->
<template>
    <view>
        <view class="uni-title uni-common-pl">地區(qū)選擇器</view>
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    當(dāng)前選擇
                </view>
                <view class="uni-list-cell-db">
                    <picker @change="bindPickerChange" :value="index" :range="array">
                        <view class="uni-input">{{array[index]}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <view class="uni-title uni-common-pl">時間選擇器</view>
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    當(dāng)前選擇
                </view>
                <view class="uni-list-cell-db">
                    <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
                        <view class="uni-input">{{time}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <view class="uni-title uni-common-pl">日期選擇器</view>
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    當(dāng)前選擇
                </view>
                <view class="uni-list-cell-db">
                    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                        <view class="uni-input">{{date}}</view>
                    </picker>
                </view>
            </view>
        </view>
    </view>
</template>


export default {
    data() {
        const currentDate = this.getDate({
            format: true
        })
        return {
            title: 'picker',
            array: ['中國', '美國', '巴西', '日本'],
            index: 0,
            date: currentDate,
            time: '12:01'
        }
    },
    computed: {
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
    methods: {
        bindPickerChange: function(e) {
            console.log('picker發(fā)送選擇改變，攜帶值為', e.target.value)
            this.index = e.target.value
        },
        bindDateChange: function(e) {
            this.date = e.target.value
        },
        bindTimeChange: function(e) {
            this.time = e.target.value
        },
        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}`;
        }
    }
}

示例代碼說明：以上示例代碼從hello uni-app示例中復(fù)制甚脉，涉及的css樣式在hello uni-app的app.vue和uni.css中

預(yù)覽H5效果：使用瀏覽器的手機(jī)模式訪問https://hellouniapp.dcloud.net.cn/pages/component/picker/picker

//自己寫的實(shí)例
//注意：省市區(qū)的值海雪，要 {{ cityVal[0] }},{{ cityVal[1] }},{{ cityVal[2] }} 分開寫
<view class="cu-form-group margin-top">
  <view class="title">所在地區(qū)：</view>
  <picker mode="region" @change="cityChange" :value="cityVal">
    <view class="picker" v-if="cityVal.length>0">
      {{ cityVal[0] }},{{ cityVal[1] }},{{ cityVal[2] }}
    </view>
    <view class="picker text-gray" v-else>請選擇</view>
  </picker>
</view>


<script>
    export default {
        data() {
            return {
                cityVal: [] //所在地區(qū)
            }
        },
        methods: {
            cityChange(e) { ////////////////////////////////////省市區(qū)
                this.cityVal = e.detail.value;
            }
        }
    }
</script>

效果圖

選擇地區(qū)

6迈喉、注意

在picker內(nèi)容還在滾動時或滾動回彈動畫還未結(jié)束時涣狗，點(diǎn)確定關(guān)閉彈出的picker们何，數(shù)據(jù)無法及時更新惭婿。需等待一下箕昭，或手動觸停滾動再點(diǎn)確定彬呻。所有平臺均如此
如果需要在PC端使用picker衣陶，需注意pc端沒有touchmove事件，可以配置H5模版闸氮，并引入touch-emulator.js來解決剪况。hello uni-app的pc版也是使用了這個方案。

7蒲跨、實(shí)例
7-1拯欧、普通的數(shù)據(jù)綁定

//頁面
<view class="cu-form-group margin-top">
  <view class="title">普通選擇</view>
  <picker @change="PickerChange" :value="index" :range="picker">
    <view class="picker">{{index>-1?picker[index]:'禁止換行，超出容器部分會以 ... 方式截?cái)?}}</view>
  </picker>
</view>

//js
export default {
  data() {
    return {
      index: -1,
      picker: ['喵喵喵', '汪汪汪', '哼唧哼唧']
    }
  },
  methods: {
    PickerChange(e) {
      this.index = e.detail.value
    }
  }
}

7-2财骨、動態(tài)綁定數(shù)據(jù)

//頁面
<view class="cu-form-group margin-top">
  <view class="title">班級列表</view>
  <picker :value="classIndex" :range-key="'FClassName'" :range="classList" @change="classListPChange">
      <view class="picker">{{ classList[classIndex].FClassName }}</view>
  </picker>
</view>

//js
export default {
  data() {
    return {
      classIndex: 0, //班級列表 -- 默認(rèn)顯示第一個班級的下標(biāo)
      classID: 0, //班級列表 -- 某班級ID
      classList: [{'FID':56,'FClassName':'一年級1班'},{'FID':57,'FClassName':'二年級2班'},{'FID':58,'FClassName':'三年級3班'}]
    }
  },
  methods: {
    classListPChange(e) {
      var thisIndex = e.detail.value;
      this.classID = classList[thisIndex].FID;
      this.classIndex = thisIndex;
    }
  }
}

:range-key="'FClassName'"镐作，F(xiàn)ClassName要加單引號