vue如何實(shí)現(xiàn)ios原生picker效果

這篇文章將為大家詳細(xì)講解有關(guān)vue如何實(shí)現(xiàn)ios原生picker效果，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

以前最早實(shí)現(xiàn)了一個(gè)類似的時(shí)間選擇插件，但是適用范圍太窄，索性最近要把這個(gè)實(shí)現(xiàn)方式發(fā)布出來(lái)，就重寫了一個(gè)高復(fù)用的vue組件。

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

效果預(yù)覽

gitHub

滾輪部分主要dom結(jié)構(gòu)

<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: {}
  }

設(shè)置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樣式設(shè)置

/* 滾輪盒子 */
.pd-select-wheel {
  transform-style: preserve-3d;
  height: 30px;
}
/* 滾輪單項(xiàng) */
.pd-select-wheel-item {
  white-space: nowrap;
  text-overflow: ellipsis;
  backface-visibility: hidden;
  position: absolute;
  top: 0px;
  width: 100%;
  overflow: hidden;
}

主要注意2個(gè)屬性 transform-style: preserve-3d; backface-visibility: hidden;

第一個(gè)是3d布局，讓界面3D化，第二個(gè)是讓滾輪背后自動(dòng)隱藏(上圖紅色部分,背面的dom節(jié)點(diǎn) 會(huì)自動(dòng)隱藏)

如何實(shí)現(xiàn)3D 滾輪

盒子主要這句css transform: rotate3d(1, 0, 0, x deg);

item主要運(yùn)用這句css transform: rotate3d(1, 0, 0, xdeg) translate3d(0px, 0px, [x]px);

上面2張圖展示了translate3d(0px, 0px, [x]px);這句話的效果 [x]就是圓的半徑

從上面的圖可以看見(jiàn)，我們只需旋轉(zhuǎn)每個(gè)dom自身，然后利用translate3d(0px, 0px, [x]px);把每個(gè)dom擴(kuò)展開

就形成了圓環(huán).α就是每個(gè)dom自身旋轉(zhuǎn)的角度，因?yàn)檫@里只用了0到180°，所以用了個(gè)盒子在裝這些dom

行高 和角度計(jì)算

已知兩邊和夾角 算第三邊長(zhǎng)度 ~=34px

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

無(wú)限滾輪實(shí)現(xiàn)

/* 滾輪展示大小限定 */
spin: {start: 0, end: 9, branch: 9}
 
/* 獲取spin 數(shù)據(jù) */
 getSpinData (index) {
  index = index % this.listData.length
  return this.listData[index >= 0 ? index : index + this.listData.length]
 }
 /* 模運(yùn)算 獲取數(shù)組有的索引 這樣就構(gòu)成 圓環(huán)了 */

touchend做特殊處理

在touchend 里設(shè)置setCSS類型 把滾動(dòng)數(shù)據(jù)取整，這樣停止的時(shí)候就是

一格一格的準(zhǔn)確轉(zhuǎn)動(dòng)到位

// other code ....
/* 計(jì)算touchEnd移動(dòng)的整數(shù)距離 */
    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 ....
慣性緩動(dòng)
// 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 ....

獲取當(dāng)前選中值

/* 在設(shè)置完css后獲取值 */
setStyle (move, type, time) {
  // ...other code
  /* 設(shè)置$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)
   }

初始化設(shè)置

mounted () {
   /* 事件綁定 */
   this.$el.addEventListener('touchstart', this.itemTouchStart)
   this.$el.addEventListener('touchmove', this.itemTouchMove)
   this.$el.addEventListener('touchend', this.itemTouchEnd)
   /* 初始化狀態(tài) */
   let index = this.listData.indexOf(this.value)
   if (index === -1) {
    console.warn('當(dāng)前初始值不存在，請(qǐng)檢查后listData范圍??！')
    this.setListTransform()
    this.getPickValue(0)
   } else {
    let move = index * 34
    /* 因?yàn)橥匣瑒?dòng)所以是負(fù) */
    this.setStyle(-move)
    this.setListTransform(-move, -move)
   }

當(dāng)展示為非無(wú)限滾輪的時(shí)

這里我們很好判斷，就是滾動(dòng)的距離不能超過(guò)原始數(shù)的數(shù)組長(zhǎng)度*34，且不能小于0（實(shí)際代碼中涉及方向）

/* 根據(jù)滾輪類型 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
     }
    }
 /* 根據(jù)type 控制滾輪顯示效果 */
   setHidden (index) {
    if (this.type === 'line') {
     return index < 0 || index > this.listData.length - 1
    } else {
     return false
    }
   },

dom結(jié)構(gòu)也增加了對(duì)應(yīng)的響應(yīng)

<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)}" : :index="el.index" v-for="el,index in renderData " :key="index">{{el.value}}</li>
  </ul>
 </div>

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

關(guān)于“vue如何實(shí)現(xiàn)ios原生picker效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。