vue 實(shí)現(xiàn) ios 原生picker 效果及實(shí)現(xiàn)思路解析
以前最早實(shí)現(xiàn)了一個(gè)類似的時(shí)間選擇插件，但是適用范圍太窄，索性最近要把這個(gè)實(shí)現(xiàn)方式發(fā)布出來，就重寫了一個(gè)高復(fù)用的vue組件。
支持安卓4.0以上，safari 7以上
滾輪部分主要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]就是圓的半徑
從上面的圖可以看見，我們只需旋轉(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/
無限滾輪實(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)展示為非無限滾輪的時(shí)
這里我們很好判斷，就是滾動(dòng)的距離不能超過原始數(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)}" :style="setWheelItemDeg(el.index)" :index="el.index" v-for="el,index in renderData " :key="index">{{el.value}}</li>
</ul>
</div>
總結(jié)
以上所述是小編給大家介紹的vue 實(shí)現(xiàn) ios 原生picker 效果及思路解析，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- vue學(xué)習(xí)之mintui picker選擇器實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)示例
- vue mint-ui學(xué)習(xí)筆記之picker的使用
- vue2.0 與 bootstrap datetimepicker的結(jié)合使用實(shí)例
- 基于Vue實(shí)現(xiàn)timepicker
- Vue2 配置 Axios api 接口調(diào)用文件的方法
- vue 里面使用axios 和封裝的示例代碼
- Vue axios 中提交表單數(shù)據(jù)(含上傳文件)
- VUE axios發(fā)送跨域請(qǐng)求需要注意的問題
- 詳解Vue.js 2.0 如何使用axios
- Vue.js實(shí)戰(zhàn)之使用Vuex + axios發(fā)送請(qǐng)求詳解
相關(guān)文章
這篇文章主要為大家介紹了用了babel是否還需要polyfill的原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
vue使用keep-alive如何實(shí)現(xiàn)多頁簽并支持強(qiáng)制刷新
這篇文章主要介紹了vue使用keep-alive如何實(shí)現(xiàn)多頁簽并支持強(qiáng)制刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue使用echarts圖表自適應(yīng)的幾種解決方案
這篇文章主要給大家介紹了關(guān)于vue使用echarts圖表自適應(yīng)的幾種解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue自定義權(quán)限指令的實(shí)現(xiàn)
本文主要介紹了vue自定義權(quán)限指令的實(shí)現(xiàn)2024-05-05
cesium開發(fā)之如何在vue項(xiàng)目中使用cesium,使用離線地圖資源
這篇文章主要介紹了cesium開發(fā)之如何在vue項(xiàng)目中使用cesium,使用離線地圖資源問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue超出文本框顯示省略號(hào)鼠標(biāo)滑入顯示全部的實(shí)現(xiàn)方法
在Vue項(xiàng)目中經(jīng)常需要處理文本內(nèi)容過長(zhǎng)的情況,這篇文章主要給大家介紹了關(guān)于Vue超出文本框顯示省略號(hào)鼠標(biāo)滑入顯示全部的實(shí)現(xiàn)方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
本文是主要介紹基于Vue的一個(gè)組件開發(fā)。本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-11-11
下面小編就為大家分享一篇Vue的輪播圖組件實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
使用Vue綁定class和style樣式的幾種寫法總結(jié)
這篇文章主要介紹了使用Vue綁定class和style樣式的幾種寫法，文章通過代碼示例介紹的非常詳細(xì)，具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
使用Vue的slot插槽分發(fā)父組件內(nèi)容實(shí)現(xiàn)高度復(fù)用、更加靈活的組件(推薦)
這篇文章主要介紹了使用Vue的slot插槽分發(fā)父組件內(nèi)容實(shí)現(xiàn)高度復(fù)用、更加靈活的組件 ,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05