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

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

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

效果预览

github

滚轮部分主要dom结构

<template data-filtered="filtered">
 <div class="pd-select-item">
  <div class="pd-select-line"></div>
  <ul class="pd-select-list">
   <li class="pd-select-list-item">1</li>
  </ul>
  <ul class="pd-select-wheel">
   <li class="pd-select-wheel-item">1</li>
  </ul>
 </div>
</template>
props
props: {
   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

无限滚轮实现

/* 滚轮展示大小限定 */
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) * 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结构也增加了对应的响应

<div class="pd-select-item">
  <div class="pd-select-line"></div>
  <div class="pd-select-list">
   <ul class="pd-select-ul" ref="list">
    <li class="pd-select-list-item" v-for="el,index in renderdata " :class="{'hidden':sethidden(el.index)}" :key="index">{{el.value}}</li>
   </ul>
  </div>
  <ul class="pd-select-wheel" ref="wheel">
   <li class="pd-select-wheel-item" :class="{'hidden':sethidden(el.index)}" :style="setwheelitemdeg(el.index)" :index="el.index" v-for="el,index in renderdata " :key="index">{{el.value}}</li>
  </ul>
 </div>

总结

以上所述是小编给大家介绍的vue 实现 ios 原生picker 效果及思路解析，希望对大家有所帮助