以前早實現了一個類似的時間選擇插件，但是適用范圍太窄，索性近要把這個實現方式發布出來，就重寫了一個高復用的vue組件。
支持安卓4.0以上，safari 7以上
|
<template>
<divclass="pd-select-item">
<divclass="pd-select-line"></div>
<ulclass="pd-select-list">
<liclass="pd-select-list-item">1</li>
</ul>
<ulclass="pd-select-wheel">
<liclass="pd-select-wheel-item">1</li>
</ul>
</div>
</template>
|
|
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/calculator/sanjiaoxingjiaodu/
|
/* 滾輪展示大小限定 */
spin: {start: 0, end: 9, branch: 9}
/* 獲取spin 數據 */
getSpinData (index) {
index = index %this.listData.length
returnthis.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') {
returnindex < 0 || index >this.listData.length - 1
}else{
returnfalse
}
},
|
dom結構也增加了對應的響應
|
<divclass="pd-select-item">
<divclass="pd-select-line"></div>
<divclass="pd-select-list">
<ulclass="pd-select-ul"ref="list">
<liclass="pd-select-list-item"v-for="el,index in renderData ":class="{'hidden':setHidden(el.index)}":key="index">{{el.value}}</li>
</ul>
</div>
<ulclass="pd-select-wheel"ref="wheel">
<liclass="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>
|
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
