vue如何实现ios原生选择效果 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关vue如何实现ios原生选择效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

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

效果预览

gitHub

<强>滚轮部分主要dom结构

& lt; template 过滤数据=癴iltered"比; 　　,& lt; div 类=皃d-select-item"比; 　　& lt;才能div 类=皃d-select-line"祝辞& lt;/div> 　　& lt;才能ul 类=皃d-select-list"比; 　　,,& lt; li 类=皃d-select-list-item"在1 & lt;/li> 　　& lt;才能/ul> 　　& lt;才能ul 类=皃d-select-wheel"比; 　　,,& lt; li 类=皃d-select-wheel-item"在1 & lt;/li> 　　& lt;才能/ul> 　　,& lt;/div> 　　& lt;/template> 　　道具　　道具:{ 　　,,,数据:{ 　　,,,类型:,数组, 　　,,,要求:真实　　,,}, 　　,,,类型:{ 　　,,,类型:,字符串, 　　,,,默认值:,& # 39;循环# 39; 　　,,}, 　　,,,的值:{} 　　以前,,}

<强>设置css样式使其垂直居中

.pd-select-line,, .pd-select-list, .pd-select-wheel { 　　位置:才能,绝对; 　　,,左:0; 　　,,右:0; 　　,,:50%; 　　变换才能:translateY (-50%); 　　} 　　.pd-select-list { 　　,,溢出:隐藏。　　}

<>强滚轮3 d样式设置

/*,滚轮盒子,*/.pd-select-wheel { 　　,,传输格式:preserve-3d; 　　,,身高:30 px; 　　}/*,滚轮单项,*/.pd-select-wheel-item { 　　,,空白:nowrap;} 　　,,文本溢出:省略; 　　backface-visibility才能:隐藏; 　　位置:才能,绝对; 　　,,:0 px; 　　,,宽度:100%; 　　,,溢出:隐藏。　　}

vue如何实现ios原生选择效果

主要注意2个属性传输格式:preserve-3d;backface-visibility:隐藏的;

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

<>强如何实现3 d滚轮

盒子主要这句css转换:rotate3d (1 0 0, x度),

项主要运用这句css转换:rotate3d (1,0,0, xdeg) translate3d (0 px, 0 px, [x] px);

vue如何实现ios原生选择效果

vue如何实现ios原生选择效果”> <br/> <img src=

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

vue如何实现ios原生选择效果

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

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

<强>行高和角度计算

vue如何实现ios原生选择效果

已知两边和夹角算第三边长度~=34 px http://tool.520101.com/calculator/sanjiaoxingjiaodu/

<强>无限滚轮实现

/*,滚轮展示大小限定,*/旋转:{开始:0,,结束:,9日,分支:,9} 　　,/*,获取spin 数据,*/,getSpinData (指数),{ 　　时间=index 才能;index % this.listData.length 　　return 才能;this.listData [index 祝辞=,0,?,index :, index +, this.listData.length] 　　,} 　　,/*模运算,获取数组有的索引,这样就构成,圆环了,*/

<强> touchend做特殊处理

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

<强>一格一格的准确转动到位

//, other code ..../*,计算touchEnd移动的整数距离,*/,,,let endMove =利润　　,,,let endDeg =, Math.round(时间/updateDeg 度),*度　　,,,if (type ===, & # 39;结束# 39;),{ 　　,,,,this.setListTransform (endMove,保证金) 　　,,,,this.setWheelDeg (endDeg) 　　,,,},{else 　　,,,,this.setListTransform (updateMove,保证金) 　　,,,,this.setWheelDeg (updateDeg) 　　,,,} 　　,//other code .... 　　惯性缓动//,other code .... 　　setWheelDeg (updateDeg、,类型,time =, 1000), { 　　,,,if (type ===, & # 39;结束# 39;),{ 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null