目錄

1.基本介紹

2.案例介紹

? ? ? ? ①注意事項：

? ? ? ? ②效果展示

3.代碼展示

? ? ? ? ①view部分

②js部分

③css樣式

---

1.基本介紹

????????從底部彈起的滾動選擇器。支持五種選擇器，通過mode來區(qū)分，分別是普通選擇器，多列選擇器，時間選擇器，日期選擇器，省市區(qū)選擇器，默認是普通選擇器。

2.案例介紹

? ? ? ? ①注意事項：

????????????????當(dāng)選擇時間和日期的時候會默認直接展示當(dāng)前的時間和當(dāng)天的日期

? ? ? ? ②效果展示

????????? ? ? ? ? ? ? ? ??

3.代碼展示

? ? ? ? ①view部分

<!--日期選擇-->
?? ??? ??? ??? ??? ??? ?<view class="SelectDate">
?? ??? ??? ??? ??? ??? ??? ?<view class="DateLabel">
?? ??? ??? ??? ??? ??? ??? ??? ?面試日期
?? ??? ??? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ??? ??? ??? ?<view class="DateText">
?? ??? ??? ??? ??? ??? ??? ??? ?<picker mode="date" @change="onDateChange" :value="DateValue">
?? ??? ??? ??? ??? ??? ??? ??? ??? ?<view class="date-picker">{{DateValue}}</view>
?? ??? ??? ??? ??? ??? ??? ??? ?</picker>
?? ??? ??? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ??? ??? ?</view>

?? ??? ??? ??? ??? ??? ?<view class="SelectTime">
?? ??? ??? ??? ??? ??? ??? ?<view class="TimeLabel">
?? ??? ??? ??? ??? ??? ??? ??? ?面試時間
?? ??? ??? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ??? ??? ??? ?<view class="TimeText">
?? ??? ??? ??? ??? ??? ??? ??? ?<picker mode="time" @change="onTimeChange" :value="TimeValue">
?? ??? ??? ??? ??? ??? ??? ??? ??? ?<view class="Time-picker">{{TimeValue}}</view>
?? ??? ??? ??? ??? ??? ??? ??? ?</picker>
?? ??? ??? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ??? ??? ?</view>

②js部分

<script>
?? ?export default {
?? ??? ?data() {

?? ??? ??? ?return {
?? ??? ??? ??? ?DateValue: "請選擇日期",
?? ??? ??? ??? ?TimeValue: "請選擇時間",
?? ??? ??? ?}
?? ??? ?},
?? ??? ?methods: {

?? ??? ??? ?onDateChange: function(e) {
?? ??? ??? ??? ?this.DateValue = e.detail.value;
?? ??? ??? ?},

?? ??? ??? ?onTimeChange: function(e) {
?? ??? ??? ??? ?this.TimeValue = e.detail.value;
? ? ? ? ? ? }
?? ??? ??? ?
?? ??? ?}
?? ?}
</script>

③css樣式

????????/* ## 日期 ## */

?? ??? ??? ?.SelectDate {
?? ??? ??? ??? ?height: 72rpx;
?? ??? ??? ??? ?display: flex;
?? ??? ??? ??? ?flex-direction: grow;
?? ??? ??? ??? ?margin-top: 24rpx;
?? ??? ??? ?}

?? ??? ??? ?.DateLabel {
?? ??? ??? ??? ?width: 0;
?? ??? ??? ??? ?flex-grow: 3;
?? ??? ??? ??? ?text-align: left;
?? ??? ??? ??? ?padding-left: 24px;

?? ??? ??? ?}

?? ??? ??? ?.DateText {
?? ??? ??? ??? ?width: 0;
?? ??? ??? ??? ?flex-grow: 7;
?? ??? ??? ?}

?? ??? ??? ?.date-picker {
?? ??? ??? ??? ?color: #8f8f8f;
?? ??? ??? ?}

?? ??? ??? ?/* ## 時間 ## */

?? ??? ??? ?.SelectTime {
?? ??? ??? ??? ?display: flex;
?? ??? ??? ??? ?flex-direction: grow;
?? ??? ??? ?}

?? ??? ??? ?.TimeLabel {
?? ??? ??? ??? ?width: 0;
?? ??? ??? ??? ?flex-grow: 3;
?? ??? ??? ??? ?text-align: left;
?? ??? ??? ??? ?padding-left: 24px;
?? ??? ??? ?}

?? ??? ??? ?.TimeText {
?? ??? ??? ??? ?width: 0;
?? ??? ??? ??? ?flex-grow: 7;
?? ??? ??? ?}

?? ??? ??? ?.Time-picker {
?? ??? ??? ??? ?color: #8f8f8f;
?? ??? ??? ?}

以上是一個以uni-app使用picker些的簡單的一個時間選擇器的小案例；

詳情可看：picker | uni-app官網(wǎng)