简体中文
组件类型:UniPickerViewElement
嵌入页面的滚动选择器
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 开始) |
名称 | 类型 | 必填 | 默认值 | 描述 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
detail | UniPickerViewChangeEventDetail | 是 | - | - | ||||||||||
| ||||||||||||||
bubbles | boolean | 是 | - | 是否冒泡 | ||||||||||
cancelable | boolean | 是 | - | 是否可以取消 | ||||||||||
type | string | 是 | - | 事件类型 | ||||||||||
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||
timeStamp | number | 是 | - | 事件发生时的时间戳 |
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
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 |
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>
仅可放置于 picker-view 中,其子节点未继承 picker-view 的选中框的高度,需要自己设置高度并居中
Android | iOS | web |
---|---|---|
3.9 | 4.11 | 4.0 |