uni-app
uni-app x
uniCloud
HBuilder
uni 小程序 sdk
uni-app x
uni-app
uni-app x
uniCloud
HBuilder
uni 小程序 sdk
简体中文
组件
picker-view
兼容性
属性
事件
UniPickerViewChangeEvent
子组件
示例
参见
tips

# picker-view

组件类型：UniPickerViewElement

嵌入页面的滚动选择器

# 兼容性

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

# 属性

名称 类型 默认值 兼容性 描述
name string -
表单的控件名称，作为键值对的一部分与表单(form组件)一同提交
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 -
(eventhandle)
当滚动选择开始时候触发事件
@pickend eventhandle -
(eventhandle)
当滚动选择结束时候触发事件

# 事件

# UniPickerViewChangeEvent

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

# 子组件

子组件 兼容性
picker-view-column

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

扫码体验（手机浏览器跳转到App直达页）

示例

<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>
    <boolean-data :defaultValue="false" title="设置选择器中间选中框的样式" @change="setIndicatorStyle"></boolean-data>
    <!-- #ifdef WEB || MP-WEIXIN -->
    <boolean-data :defaultValue="false" title="设置选择器中间选中框的类名" @change="setIndicatorClass"></boolean-data>
    <boolean-data :defaultValue="false" title="设置蒙层的样式" @change="setMaskStyle"></boolean-data>
    <boolean-data :defaultValue="false" title="设置蒙层的类名" @change="setMaskClass"></boolean-data>
    <!-- #endif -->
    <!-- #ifdef APP -->
    <boolean-data :defaultValue="false" title="设置蒙层上半部分的样式" @change="setMaskTopStyle"></boolean-data>
    <boolean-data :defaultValue="false" title="设置蒙层下半部分的样式" @change="setMaskBottomStyle"></boolean-data>
    <!-- #endif -->
  </view>
</template>

<script lang="uts">
  import { state, setEventCallbackNum } from '@/store/index.uts'
  export default {
    data() {
      // 20180112 HBuilderX内测开始 :)
      const _years : number[] = []
      const _year = 2018
      const _months : number[] = []
      const _month : number = 1
      const _days : number[] = []
      const _day = 12
      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;',
        indicatorClass: '',
        maskStyle: '',
        maskClass: '',
        maskTopStyle: '',
        maskBottomStyle: ''
      }
    },
    methods: {
      setIndicatorStyle(checked : boolean) {
        const extraStyle = 'height: 50px;border:#ff5500 solid 1px;background:rgba(182, 179, 255, 0.4);';
        // #ifdef APP-HARMONY
        this.indicatorStyle = checked ? extraStyle : "height: 50px;border:none;background:transparent;";
        // #endif
        // #ifndef APP-HARMONY
        this.indicatorStyle = checked ? extraStyle : "height: 50px;";
        // #endif
      },
      setIndicatorClass(checked : boolean) {
        this.indicatorClass = checked ? "indicator-test" : ""
      },
      setMaskStyle(checked : boolean) {
        const extraMaskStyle = "background-image: linear-gradient(to bottom, #d8e5ff, rgba(216, 229, 255, 0));"
        this.maskStyle = checked ? extraMaskStyle : ""
      },
      setMaskClass(checked : boolean) {
        this.maskClass = checked ? "mask-test" : ""
      },
      setMaskTopStyle(checked : boolean) {
        const linearToTop = "background-image: linear-gradient(to bottom, #f4ff73, rgba(216, 229, 255, 0));"
        // #ifdef APP-HARMONY
        this.maskTopStyle = checked ? linearToTop : "background-image: linear-gradient(to bottom, transparent, transparent);"
        // #endif
        // #ifndef APP-HARMONY
        this.maskTopStyle = checked ? linearToTop : ""
        // #endif
      },
      setMaskBottomStyle(checked : boolean) {
        const linearToBottom = "background-image: linear-gradient(to top, #f4ff73, rgba(216, 229, 255, 0));"
        // #ifdef APP-HARMONY
        this.maskBottomStyle = checked ? linearToBottom : "background-image: linear-gradient(to bottom, transparent, transparent);"
        // #endif
        // #ifndef APP-HARMONY
        this.maskBottomStyle = checked ? linearToBottom : ""
        // #endif
      },
      // 自动化测试
      getEventCallbackNum() : number {
        return state.eventCallbackNum
      },
      // 自动化测试
      setEventCallbackNum(num : number) {
        setEventCallbackNum(num)
      },
      bindChange(e : UniPickerViewChangeEvent) {
        // 自动化测试 触发事件元素、type 类型
        // console.log(e.target?.tagName, e.type);
        if ((e.target?.tagName ?? '').includes('PICKER-VIEW')) {
          this.setEventCallbackNum(state.eventCallbackNum + 1)
        }
        if (e.type === 'change') {
          this.setEventCallbackNum(state.eventCallbackNum + 2)
        }
        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, 1, 30] as number[]
      },
      setValue1() {
        this.value = [10, 10, 10] as number[]
      },
    }
  }
</script>

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

  .item {
    height: 50px;
  }

  .text {
    line-height: 50px;
    text-align: center;
  }

  /* 自动化测试 */
  .indicator-test {
    height: 50px;
    border: #ff5500 solid 1px;
    background:rgba(182, 179, 255, 0.4);
  }

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

# 参见

# tips

  • picker里如放置较长内容，应该使用list-view而不是scroll-view。
  • uni ui的uni-data-picker，是封装好的弹出式、分列加载的、DataCom规范的多列选择组件，适用于地址选择等场景。
本页导读
picker-view
兼容性
属性
事件
UniPickerViewChangeEvent
子组件
示例
参见
tips