uniapp中的picker選擇器的幾種使用場(chǎng)景
一、普通選擇器
<template> <view> <picker @change="bindPickerChange" :value="index" :range="array" range-key="name"> <view style="padding: 20rpx;background-color: white;">{{ array[index].name }}</view> </picker> </view> </template> <script> export default { data() { return { array: [{ name: '中國(guó)' }, { name: '美國(guó)' }, { name: '巴西' }, { name: '日本' }], index: 2, }; }, methods: { bindPickerChange: function(e) { this.index = e.detail.value; } } }; </script>
二、多列選擇器
<template> <view> <picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray"> <view style="background-color: white;"> {{ multiArray[0][multiIndex[0]] }}, {{ multiArray[1][multiIndex[1]] }}, {{ multiArray[2][multiIndex[2]] }} </view> </picker> </view> </template> <script> export default { data() { return { multiArray: [['亞洲', '歐洲'], ['中國(guó)', '日本'], ['北京', '上海', '廣州']], multiIndex: [0, 0, 0] }; }, methods: { bindMultiPickerColumnChange: function(e) { this.multiIndex[e.detail.column] = e.detail.value; switch (e.detail.column) { case 0: //拖動(dòng)第1列 switch (this.multiIndex[0]) { case 0: this.multiArray[1] = ['中國(guó)', '日本']; this.multiArray[2] = ['北京', '上海', '廣州']; break; case 1: this.multiArray[1] = ['英國(guó)', '法國(guó)']; this.multiArray[2] = ['倫敦', '曼徹斯特']; break; } this.multiIndex.splice(1, 1, 0); this.multiIndex.splice(2, 1, 0); break; case 1: //拖動(dòng)第2列 switch ( this.multiIndex[0] //判斷第一列是什么 ) { case 0: switch (this.multiIndex[1]) { case 0: this.multiArray[2] = ['北京', '上海', '廣州']; break; case 1: this.multiArray[2] = ['東京', '北海道']; break; } break; case 1: switch (this.multiIndex[1]) { case 0: this.multiArray[2] = ['倫敦', '曼徹斯特']; break; case 1: this.multiArray[2] = ['巴黎', '馬賽']; break; } break; } this.multiIndex.splice(2, 1, 0); break; } this.$forceUpdate(); } } }; </script>
三、時(shí)間選擇器
<template> <view> <picker mode="time" :value="time" :start="minTime" :end=maxTime @change="bindTimeChange"> <view style="background-color: white;">{{ time }}</view> </picker> </view> </template> <script> export default { data() { return { time: '12:01', minTime:'09:01', maxTime:"21:01" }; }, methods: { bindTimeChange: function(e) { this.time = e.detail.value; } } }; </script>
四、日期選擇器
<template> <view> <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"> <view style="background-color: #07C160;">{{ date }}</view> </picker> </view> </template> <script> 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 - 10; } else if (type === 'end') { year = year + 10; } month = month > 9 ? month : '0' + month; day = day > 9 ? day : '0' + day; return `${year}-${month}-${day}`; } export default { data() { return { date: getDate({ format: true }), startDate: getDate('start'), endDate: getDate('end'), }; }, methods: { bindDateChange: function(e) { this.date = e.detail.value; } } }; </script>
到此這篇關(guān)于uniapp中的picker選擇器的幾種使用場(chǎng)景的文章就介紹到這了,更多相關(guān)uniapp picker選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js解析json讀取List中的實(shí)體對(duì)象示例
這篇文章主要介紹了js解析json讀取List中的實(shí)體對(duì)象的具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03JavaScript實(shí)現(xiàn)梯形乘法表的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)梯形乘法表的方法,涉及基本javascript結(jié)合表格操作的技巧,需要的朋友可以參考下2015-04-04JS計(jì)算網(wǎng)頁(yè)停留時(shí)間代碼
這篇文章主要介紹了JS計(jì)算網(wǎng)頁(yè)停留時(shí)間的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04對(duì)setInterval在火狐和chrome切換標(biāo)簽產(chǎn)生奇怪的效果之探索,與解決方案!
其實(shí)這個(gè)問(wèn)題,已經(jīng)困擾我很近。就是切換瀏覽器標(biāo)簽之后,再等幾十秒的時(shí)間切換回來(lái)setInterval就亂了陣,過(guò)一會(huì)又正常了!IE瀏覽器就沒(méi)有這種奇怪的現(xiàn)象!2011-10-10JS實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示邊框的菜單效果
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示邊框的菜單效果,涉及javascript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下2016-09-09webpack4 從零學(xué)習(xí)常用配置(小結(jié))
這篇文章主要介紹了webpack4 從零學(xué)習(xí)常用配置(小結(jié)),詳細(xì)的介紹了幾個(gè)核心部分,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05javascript寫(xiě)的簡(jiǎn)單的計(jì)算器,內(nèi)容很多,方法實(shí)用,推薦
最近用javascript寫(xiě)了一個(gè)簡(jiǎn)單的計(jì)算器,自己測(cè)試感覺(jué)還好,代碼都給了注釋?zhuān)浅2诲e(cuò),推薦大家學(xué)習(xí)。2011-12-12Js操作樹(shù)節(jié)點(diǎn)自動(dòng)折疊展開(kāi)的幾種方法
這篇文章主要介紹了Js操作樹(shù)節(jié)點(diǎn)自動(dòng)折疊展開(kāi)的幾種方法,需要的朋友可以參考下2014-05-05