這篇文章主要介紹了vue 實現ios 原生picker 效果及實現思路解析,本文給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下
以前最早實現了一個類似的時間選擇插件，但是適用範圍太窄，索性最近要把這個實現方式發佈出來，就重寫了一個高復用的vue組件。
支援安卓4.0以上，safari 7以上
#效果預覽
gitHub
滾輪部分主要dom結構
<template data-filtered="filtered">
<p class="pd-select-item">
<p class="pd-select-line"></p>
<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>
</p>
</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
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) * 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結構也增加了對應的回應
<p class="pd-select-item">
<p class="pd-select-line"></p>
<p 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>
</p>
<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>
</p>登入後複製
上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
JavaScript模組最佳化
#使用webpack如何擷取第三方函式庫
使用JS如何判斷客戶端類型
#
以上是在vue中如何實現picker效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
