picker-view

Attributes

Event

PickerViewChangeEvent

Example

Compatibility

Children Components

# picker-view

Component Type：UniPickerViewElement

嵌入页面的滚动选择器

# # Attributes

name	type	default	description
value	Array<Number>	-	picker-view-column 选择的第几项
indicator-style	string.CSSString	-	设置选择器中间选中框的样式
mask-top-style	string.CSSString	-	设置蒙层上半部分的样式
mask-bottom-style	string.CSSString	-	设置蒙层下半部分的样式
@change	(event: PickerViewChangeEvent) => void	-	当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）

# # Event

# # PickerViewChangeEvent

# # Constructor

name	type	required	default	description
value	Array<number>	YES	-	-

# # PickerViewChangeEvent Values

name	type	required	default	description
detail	PickerViewChangeEventDetail	YES	-	-
type	string	YES	-	事件类型
target	Element	YES	-	触发事件的组件
currentTarget	Element	YES	-	当前组件
timeStamp	number	YES	-	事件发生时的时间戳

# # PickerViewChangeEventDetail Values

name	type	optinal	default	description
ctors	Constructor	YES	-	-
value	Array<number>	YES	-	-

# # PickerViewChangeEvent Methods

name	type	required	default	description
stopPropagation	() => void	YES	-	阻止当前事件的进一步传播
preventDefault	() => void	YES	-	阻止当前事件的默认行为

# # Example

hello uni-app x

<template>
   <view>
       <page-head :title="title"></page-head>
       <view class="uni-padding-wrap">
           <view class="uni-title">
               日期：{{year}}年{{month}}月{{day}}日
           </view>
       </view>
       <picker-view class="picker-view" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
           :mask-top-style="maskTopStyle" :mask-bottom-style="maskBottomStyle">
           <picker-view-column class="picker-view-column">
               <view class="item" v-for="(item,index) in years" :key="index"><text class="text">{{item}}年</text></view>
           </picker-view-column>
           <picker-view-column class="picker-view-column">
               <view class="item" v-for="(item,index) in months" :key="index"><text class="text">{{item}}月</text>
               </view>
           </picker-view-column>
           <picker-view-column class="picker-view-column">
               <view class="item" v-for="(item,index) in days" :key="index"><text class="text">{{item}}日</text></view>
           </picker-view-column>
       </picker-view>
   </view>
</template>

<script lang="uts">
   export default {
       data() {
           const date = new Date()
           const _years : number[] = []
           const _year = date.getFullYear()
           const _months : number[] = []
           const _month : number = date.getMonth() + 1
           const _days : number[] = []
           const _day = date.getDate()
           for (let i = 2000; i <= _year; i++) {
               _years.push(i)
           }
           for (let i = 1; i <= 12; i++) {
               _months.push(i)
           }
           for (let i = 1; i <= 31; i++) {
               _days.push(i)
           }
           return {
               title: 'picker-view',
               years: _years as number[],
               year: _year as number,
               months: _months as number[],
               month: _month as number,
               days: _days as number[],
               day: _day as number,
               value: [_year - 2000, _month - 1, _day - 1] as number[],
               result: [] as number[],
               indicatorStyle: 'height: 50px;',
               maskTopStyle: '',
               maskBottomStyle: ''
           }
       },
       methods: {
   		clickView() {
   			
   		},
           bindChange(e : PickerViewChangeEvent) {
               const val = e.detail.value
               this.result = val
               this.year = this.years[val[0]]
               this.month = this.months[val[1]]
               this.day = this.days[val[2]]
           },
           setValue() {
               this.value = [0, 0, 0] as number[]
           },
           setValue1() {
               this.value = [10, 10, 10] as number[]
           },
       }
   }
</script>

<style>
   .picker-view {
       width: 100%;
       height: 320px;
       margin-top: 10px;
   }

   .item {
       height: 50px;
   }

   .text {
       line-height: 50px;
       text-align: center;
   }
</style>

# # Compatibility

	Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
picker-view	5.0	√	√	10.0	√	x
value	5.0	√	√	10.0	√	x
indicator-style	5.0	√	√	10.0	√	x
mask-top-style	5.0	x	√	10.0	x	x
mask-bottom-style	5.0	x	√	10.0	x	x
@change	5.0	√	√	10.0	√	x