在vue中如何实现picker效果

这篇文章主要介绍了vue 实现 ios 原生picker 效果及实现思路解析,本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下

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

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

效果预览

gitHub

立即学习“前端免费学习笔记（深入）”；

滚轮部分主要dom结构

 
  
  
   
1
  
  
   
1
  
 propsprops: {   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

行高 和角度计算

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

http://tool.520101.com/calculator/sanjiaoxingjiaodu/

无限滚轮实现

/* 滚轮展示大小限定 */spin: {start: 0, end: 9, branch: 9} /* 获取spin 数据 */ getSpinData (index) {  index = index % this.listData.length  return this.listData[index >= 0 ? index : index + this.listData.length] } /* 模运算 获取数组有的索引 这样就构成 圆环了 */

登录后复制

touchend做特殊处理

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

一格一格的准确转动到位

// other code ..../* 计算touchEnd移动的整数距离 */    let endMove = margin    let endDeg = Math.round(updateDeg / deg) * deg    if (type === 'end') {     this.setListTransform(endMove, margin)     this.setWheelDeg(endDeg)    } else {     this.setListTransform(updateMove, margin)     this.setWheelDeg(updateDeg)    } // other code ....惯性缓动// other code ....setWheelDeg (updateDeg, type, time = 1000) {    if (type === 'end') {     this.$refs.wheel.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`     this.$refs.wheel.style.webkitTransform = `rotate3d(1, 0, 0, ${updateDeg}deg)`    } else {     this.$refs.wheel.style.webkitTransition = ''     this.$refs.wheel.style.webkitTransform = `rotate3d(1, 0, 0, ${updateDeg}deg)`    }   }setListTransform (translateY = 0, marginTop = 0, type, time = 1000) {    if (type === 'end') {     this.$refs.list.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`     this.$refs.list.style.webkitTransform = `translateY(${translateY - this.spin.branch * 34}px)`     this.$refs.list.style.marginTop = `${-marginTop}px`     this.$refs.list.setAttribute('scroll', translateY)     console.log('end')    } else {     this.$refs.list.style.webkitTransition = ''     this.$refs.list.style.webkitTransform = `translateY(${translateY - this.spin.branch * 34}px)`     this.$refs.list.style.marginTop = `${-marginTop}px`     this.$refs.list.setAttribute('scroll', translateY)    }}// other code ....

登录后复制

获取当前选中值

/* 在设置完css后获取值 */setStyle (move, type, time) {  // ...other code  /* 设置$emit 延迟 */  setTimeout(() => this.getPickValue(endMove), 1000) // ...other code}/* 获取选中值 */   getPickValue (move) {    let index = Math.abs(move / 34)    let pickValue = this.getSpinData(index)    this.$emit('input', pickValue)   }

登录后复制

初始化设置

mounted () {   /* 事件绑定 */   this.$el.addEventListener('touchstart', this.itemTouchStart)   this.$el.addEventListener('touchmove', this.itemTouchMove)   this.$el.addEventListener('touchend', this.itemTouchEnd)   /* 初始化状态 */   let index = this.listData.indexOf(this.value)   if (index === -1) {    console.warn('当前初始值不存在，请检查后listData范围！！')    this.setListTransform()    this.getPickValue(0)   } else {    let move = index * 34    /* 因为往上滑动所以是负 */    this.setStyle(-move)    this.setListTransform(-move, -move)   }

登录后复制

当展示为非无限滚轮的时

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

/* 根据滚轮类型 line or cycle 判断 updateMove最大距离 */    if (this.type === 'line') {     if (updateMove > 0) {      updateMove = 0     }     if (updateMove  this.listData.length - 1    } else {     return false    }   },

登录后复制

dom结构也增加了对应的响应

登录后复制    {{el.value}}          {{el.value}}   

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JavaScript模块优化

JavaScript模块优化

JavaScript模块优化

以上就是在vue中如何实现picker效果的详细内容，更多请关注【创想鸟】其它相关文章！