vue 实现 ios 原生picker 效果及实现思路解析
发布时间：2020-12-17 02:41:21 所属栏目：百科 来源：网络整理
导读：以前最早实现了一个类似的时间选择插件，但是适用范围太窄，索性最近要把这个实现方式发布出来，就重写了一个高复用的vue组件。 支持安卓4.0以上，safari 7以上 滚轮部分主要dom结构 propsprops: { data: { type: Array,required: true },type: { type: Stri
|
以前最早实现了一个类似的时间选择插件，但是适用范围太窄，索性最近要把这个实现方式发布出来，就重写了一个高复用的vue组件。 支持安卓4.0以上，safari 7以上
滚轮部分主要dom结构设置css样式 使其垂直居中滚轮3d样式设置
主要注意2个属性 transform-style: preserve-3d; backface-visibility: hidden; 第一个是3d布局，让界面3D化，第二个是让滚轮背后自动隐藏(上图红色部分,背面的dom节点 会自动隐藏) 如何实现3D 滚轮盒子主要这句css transform: rotate3d(1,x deg); item主要运用这句css transform: rotate3d(1,xdeg) translate3d(0px,0px,[x]px);
上面2张图展示了translate3d(0px,[x]px);这句话的效果 [x]就是圆的半径
从上面的图可以看见，我们只需旋转每个dom自身，然后利用translate3d(0px,[x]px);把每个dom扩展开 就形成了圆环.α就是每个dom自身旋转的角度，因为这里只用了0到180°，所以用了个盒子在装这些dom 行高 和角度计算
已知两边和夹角 算第三边长度 ~=34px 无限滚轮实现/ 获取spin 数据 /
getSpinData (index) { index = index % this.listData.length return this.listData[index >= 0 ? index : index + this.listData.length] } / 模运算 获取数组有的索引 这样就构成 圆环了 / touchend做特殊处理在touchend 里设置setCSS类型 把滚动数据取整，这样停止的时候就是 一格一格的准确转动到位获取当前选中值 this.getPickValue(endMove),1000)
// ...other code
}
/* 获取选中值 */
getPickValue (move) {
let index = Math.abs(move / 34)
let pickValue = this.getSpinData(index)
this.$emit('input',pickValue)
}
初始化设置当展示为非无限滚轮的时这里我们很好判断，就是滚动的距离不能超过原始数的数组长度*34，且不能小于0（实际代码中涉及方向） 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结构也增加了对应的响应总结以上所述是小编给大家介绍的vue 实现 ios 原生picker 效果及思路解析。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
