摘要：以前最早實現了一個類似的時間選擇插件，但是適用范圍太窄，索性最近要把這個實現方式發布出來，就重寫了一個高復用的組件。

以前最早實現了一個類似的時間選擇插件，但是適用范圍太窄，索性最近要把這個實現方式發布出來，就重寫了一個高復用的vue組件。

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

 props: {
      data: {
        type: Array,
        required: true
      },
      type: {
        type: String,
        default: "cycle"
      },
      value: {}
    }

.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;
}

/* 滾輪盒子 */
.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節點 會自動隱藏)

盒子主要這句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/calcul...

/* 滾輪展示大小限定 */
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 里設置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結構也增加了對應的響應

    

    

      

        
{{el.value}}
      
    
    

      
{{el.value}}
    
  

如有不明白的地方，請在下方留言，或者郵箱聯系.k1868548@163.com

代碼還有優化空間，歡迎提出 謝謝