picker-view

# picker-view

组件类型：UniPickerViewElement

嵌入页面的滚动选择器

# 兼容性

Web	微信小程序	Android	iOS
4.0	4.41	3.9	4.11

# 属性

名称

类型

默认值

兼容性

描述

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
开始）

@pickstart

eventhandle

@pickend

eventhandle

# 事件

# UniPickerViewChangeEvent

# UniPickerViewChangeEventDetail

# UniPickerViewChangeEventDetail 的属性值

名称	类型	必填	默认值	兼容性	描述
value	Array<number>	是	-	-	-

# 子组件

子组件

兼容性

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" :value="value" @change="bindChange" :indicator-style="indicatorStyle"
      :indicator-class="indicatorClass" :mask-style="maskStyle" :mask-class="maskClass" :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;
  }

  /* 自动化测试 */
  .indicator-test {
    height: 50px;
    border: #0055ff solid 1px;
    background: rgba(0, 170, 0, 0.4);
  }

  .mask-test {
    background-image: linear-gradient(to bottom, #d8e5ff, rgba(216, 229, 255, 0));
  }
</style>