在vue中实现picker样式_在vue中如何实现picker效果

这篇文章主要介绍了vue 实现 ios 原生picker 效果及实现思路解析,本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下

以前最早实现了一个类似的时间选择插件，但是适用范围太窄，索性最近要把这个实现方式发布出来，就重写了一个高复用的vue组件。

支持安卓4.0以上，safari 7以上

效果预览

gitHub

滚轮部分主要dom结构

• 1

• 1

props

props: {

data: {

type: Array,

required: true

},

type: {

type: String,

default: 'cycle'

},

value: {}

}

设置css样式 使其垂直居中.pd-select-line, .pd-select-list, .pd-select-wheel {

position: absolute;

left: 0;

right: 0;

top: 50%;

transform: translateY(-50%);

}

.pd-select-list {

overflow: hidden;

}

滚轮3d样式设置/* 滚轮盒子 */

.pd-select-wheel {

transform-style: preserve-3d;

height: 30px;

}

/* 滚轮单项 */

.pd-select-wheel-item {

white-space: nowrap;

text-overflow: ellipsis;

backface-visibility: hidden;

position: absolute;

top: 0px;

width: 1