picker-view

picker-view 兼容性

属性

事件

UniPickerViewChangeEvent

展示全部

# picker-view

组件类型：UniPickerViewElement

嵌入页面的滚动选择器

# picker-view 兼容性

Android	iOS	web
3.9	4.11	4.0

# 属性

名称	类型	默认值	描述
value	array<number>	-	picker-view-column 选择的第几项
indicator-style	string(string.CSSString)	-	设置选择器中间选中框的样式
indicator-class	string(string.ClassString)	-	设置选择器中间选中框的类名
mask-style	string(string.CSSString)	-	设置蒙层的样式
mask-top-style	string(string.CSSString)	-	设置蒙层上半部分的样式
mask-bottom-style	string(string.CSSString)	-	设置蒙层下半部分的样式
mask-class	string(string.ClassString)	-	设置蒙层的类名
@change	(event: UniPickerViewChangeEvent) => void	-	当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）

# 事件

# UniPickerViewChangeEvent

# UniPickerViewChangeEvent 的属性值

名称

类型

必填

默认值

描述

detail

UniPickerViewChangeEventDetail

是

名称	类型	必备	默认值	描述
value	Array<number>	是	-	-

bubbles

boolean

是

是否冒泡

cancelable

boolean

是

是否可以取消

type

string

是

事件类型

target

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

currentTarget

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

timeStamp

number

是

事件发生时的时间戳

# UniPickerViewChangeEvent 的方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

# picker-view 属性兼容性

	Android	iOS	web
value	3.9	4.11	4.0
indicator-style	3.9	4.11	4.0
indicator-class	x	x	4.0
mask-style	x	x	4.0
mask-top-style	3.9	4.11	x
mask-bottom-style	3.9	4.11	x
mask-class	x	x	4.0
@change	3.9	4.11	4.0

# 子组件

picker-view-column

# 示例

hello uni-app x

Template

Script

<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>



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

  .item {
    height: 50px;
  }

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