频道导航

vue 实现 ios 原生picker 效果及实现思路解析

2019-01-07 Vue 前端之家

前端之家收集整理的这篇文章主要介绍了vue 实现 ios 原生picker 效果及实现思路解析，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

@H_403_1@@H_403_1@

@H_403_1@

滚轮部分主要dom结构

@H_403_1@

props props: { data: { type: Array,required: true },type: { type: String,default: 'cycle' },value: {} }

设置css样式使其垂直居中

@H_403_1@

滚轮3d样式设置

@H_403_1@

@H_403_1@@H_403_1@

主要注意2个属性 transform-style: preserve-3d; backface-visibility: hidden;@H_403_1@

第一个是3d布局，让界面3D化，第二个是让滚轮背后自动隐藏(上图红色部分,背面的dom节点会自动隐藏)@H_403_1@

如何实现3D 滚轮

@H_403_1@

盒子主要这句css transform: rotate3d(1,x deg);@H_403_1@

item主要运用这句css transform: rotate3d(1,xdeg) translate3d(0px,0px,[x]px);@H_403_1@

@H_403_1@@H_403_1@

@H_403_1@

@H_403_1@@H_403_1@

上面2张图展示了translate3d(0px,[x]px);这句话的效果 [x]就是圆的半径@H_403_1@

@H_403_1@@H_403_1@

从上面的图可以看见，我们只需旋转每个dom自身，然后利用translate3d(0px,[x]px);把每个dom扩展开@H_403_1@

就形成了圆环.α就是每个dom自身旋转的角度，因为这里只用了0到180°，所以用了个盒子在装这些dom@H_403_1@

行高和角度计算

@H_403_1@

@H_403_1@@H_403_1@

已知两边和夹角算第三边长度 ~=34px@H_403_1@

nofollow" href="http://tool.520101.com/calculator/sanjiaoxingjiaodu/">http://tool.520101.com/calculator/sanjiaoxingjiaodu/@H_403_1@

无限滚轮实现

@H_403_1@

/ 获取spin 数据 /
getSpinData (index) {
index = index % this.listData.length
return this.listData[index >= 0 ? index : index + this.listData.length]
}
/ 模运算获取数组有的索引这样就构成圆环了 /

touchend做特殊处理

@H_403_1@

在touchend 里设置setCSS类型把滚动数据取整，这样停止的时候就是@H_403_1@

一格一格的准确转动到位

@H_403_1@

获取当前选中值

@H_403_1@

this.getPickValue(endMove),1000) // ...other code } /* 获取选中值 */ getPickValue (move) { let index = Math.abs(move / 34) let pickValue = this.getSpinData(index) this.$emit('input',pickValue) }

初始化设置

@H_403_1@

当展示为非无限滚轮的时

@H_403_1@

这里我们很好判断，就是滚动的距离不能超过原始数的数组长度*34，且不能小于0（实际代码中涉及方向）@H_403_1@

0) { updateMove = 0 } if (updateMove < -(this.listData.length - 1) * singleHeight) { updateMove = -(this.listData.length - 1) * singleHeight } } /* 根据type 控制滚轮显示效果 */ setHidden (index) { if (this.type === 'line') { return index < 0 || index > this.listData.length - 1 } else { return false } },