vue 实现 ios 原生picker 效果及实现思路解析
前端之家收集整理的这篇文章主要介绍了
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
}
},
dom结构也增加了对应的响应
@H_
403_1@