以前最早实现了一个类似的时间选择插件，但是适用范围太窄，索性最近要把这个实现方式发布出来，就重写了一个高复用的vue组件。
支持安卓4.0以上，safari 7以上
效果预览
gitHub
滚轮部分主要dom结构
<template data-filtered="filtered">
<div class="pd-select-item">
<div class="pd-select-line"></div>
<ul class="pd-select-list">
<li class="pd-select-list-item">1</li>
</ul>
<ul class="pd-select-wheel">
<li class="pd-select-wheel-item">1</li>
</ul>
</div>
</template>
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: 100%;
overflow: hidden;
}
主要注意2个属性 transform-style: preserve-3d; backface-visibility: hidden;
第一个是3d布局，让界面3D化，第二个是让滚轮背后自动隐藏(上图红色部分,背面的dom节点 会自动隐藏)
如何实现3D 滚轮
盒子主要这句css transform: rotate3d(1, 0, 0, x deg);
item主要运用这句css transform: rotate3d(1, 0, 0, xdeg) translate3d(0px, 0px, [x]px);
上面2张图展示了translate3d(0px, 0px, [x]px);这句话的效果 [x]就是圆的半径
从上面的图可以看见，我们只需旋转每个dom自身，然后利用translate3d(0px, 0px, [x]px);把每个dom扩展开
就形成了圆环.α就是每个dom自身旋转的角度，因为这里只用了0到180°，所以用了个盒子在装这些dom