vue 仿IOS 滾輪選擇器

先來個截圖：

先來屢一下需求：

1.移動端使用者手上下滑動，內容上下移動，使用者手離開數字按照慣性移動一段距離。

2.當停止移動後，選中乙個文字並且文字高亮，上面的值會變成你選中的文字。

3.可以連續滾動。

說起滾動，不得不提css3的transform-style: preserve-3d;和backface-visibility: hidden;

（1）transform-style 屬性規定如何在 3d 空間中呈現被巢狀的元素。值如下圖：

我們使用preserve-3d 是讓我們的值列表呈現3d效果，他是寫在列表父級；

（2）backface-visivility 屬性定義當元素不面向螢幕時是否可見。

我們使用hidden是背面不可見的，他是寫在列表上

不過只有他們是無法完成這個艱鉅介面的。只是這兩個比較少見並少用，在此記錄一下。

結合上面的知識點那我們怎麼實現滾筒呢？

我實現的方法如下：（transform-style為什麼子元素需要定位？）

我實現的方法如下：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
<
style
>*ul
listyle
>
head
>
<
body
>
<
div 
class
>
<
ul>
<
li style
="transform: rotate3d(1, 0, 0, 80deg) translate3d(0, 0, 100px)"
>27
li>
<
li style
="transform: rotate3d(1, 0, 0, 60deg) translate3d(0, 0, 100px)"
>28
li>
<
li style
="transform: rotate3d(1, 0, 0, 40deg) translate3d(0, 0, 100px)"
>29
li>
<
li style
="transform: rotate3d(1, 0, 0, 20deg) translate3d(0, 0, 100px)"
>30
li>
<
li style
="transform: rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 100px)"
>1
li>
<
li style
="transform: rotate3d(1, 0, 0, -20deg) translate3d(0, 0, 100px)"
>2
li>
<
li style
="transform: rotate3d(1, 0, 0, -40deg) translate3d(0, 0, 100px)"
>3
li>
<
li style
="transform: rotate3d(1, 0, 0, -60deg) translate3d(0, 0, 100px)"
>4
li>
<
li style
="transform: rotate3d(1, 0, 0, -80deg) translate3d(0, 0, 100px)"
>5
li>
ul>
div>
body
>
html
>

我主要是用到的定位，都定位到一起了，也就是乙個黑點了，哈哈。。。 然後用 transform 的 rotate3d  統一 沿y軸旋轉元素 到一定的角度，然而我們要做滾筒，滾筒需要半徑，所以我用translate3d 拉伸 z 軸 （垂直螢幕）100px,

這樣元素就沿著我拉伸前的原點旋轉，半徑是 100px; 大家可以複製**執行一下，看看效果，如何有其他方法分享出來吧，共同學習進步。

說了這麼多，跟vue有什麼關係呢？ 哈哈。。。你猜？

滾動用什麼呢？ 我之前用過 scroll  ios 需要加上  -webkit-overflow-scrolling: touch; 才能觸發onscroll, 但是那種做法我試了一下，太麻煩，有滾動條，太垃圾。

這裡我們用touchstart / touchmove / touchend

mounted() ,

methods: ,
listenertouchmove(ev) deg)`;
this.updaterange(math.round(move /lineheight));
},listenertouchend(ev) ,
}

/*

*       * 求移動速度（v = s / t），判斷使用者操作快慢，從而得到慣性的滑動距離
*/getinertiadistance() ,
/*** 使用者結束滑動，應該慢慢放慢，最終停止。從而需要 a(加速度)
* @param start 開始速度
* @param position 速度方向，值: 正負1
* @param target 結束速度
*/inertia(start, position, target) 
//這段時間走的位移 s = vt + 1/2at^2;
const move = (position * start * (1000 / 60)) + (0.5 * a * (1000 / 60) * (1000 / 60)) + this
.finger.currentmove;
//根據求末速度公式： v末 = v初 + at
const newstart = (position * start) + (a * (1000 / 60));
let movedeg = (move / lineheight) *singledeg;
let actualmove =move;
//已經到達目標
if (newstart <=target)  
else
this.finger.currentmove =actualmove;
this.$refs.wheel.style.transform = `rotate3d(1, 0, 0, $deg)`;
this.updaterange(math.round(this.finger.currentmove /lineheight));
this.animate.start(this.inertia.bind(this
, newstart, position, target));
}

const a = -0.003; //

加速度  const radius = 100; //
半徑  const lineheight = 36; //
文字行高
let isinertial = false; //
是否正在慣性滑動
//根據三角形余弦公式
//反余弦得到弧度再轉換為度數,這個度數是單行文字所占有的。
let deg = math.round((math.acos((((radius * radius) + (radius * radius)) - (lineheight * lineheight)) / (2 * radius * radius)) * 180) /math.pi);
//deg這個值須360能整除，因為當滾動列佔滿一周後可以再次均勻的覆蓋在上一周文字上；滾動時不會出現錯位
while (360 % deg !== 0 && deg <= 360) 
const singledeg =deg;
//半圓下的內容條數
const space = math.floor((360 / singledeg) / 2);

iOS 時間選擇器（仿有成會議）

呼叫時切記一定要先呼叫下面 重置時間狀態 self timeselectview.reset yes 時間狀態有 空閒時間 禁用時間 已占用時間 選擇時間 固定時間 引數傳遞格式 10 00 11 00 傳遞完引數後，呼叫下面 重新整理頁面 self timeselectview reloadvie...

自定義的iOS的滾輪選擇器，附帶農曆選擇器實現

本人由論壇會員beanwolf分享 這個控制項並不是對ios自帶的uipickerview貼圖，而是重新實現，我一周多的成果，期間走了不少彎路。哈！此控制項開發的原因 最近公司有個需求，需要做乙個農曆的日期滾輪選擇器，一開始想用ios自帶的uipickerview，但是 設計人員要求的比較高，必須實...

仿ios選擇器以及相應的多選欄目

在很早之前就想寫部落格了，但感覺自己還是太菜，不太敢寫，後來看到了一篇文章感覺就是因為自己太菜了，所以才要寫部落格，通過這個平台把我所了解的 知道的分享給大家，和大家共同交流溝通，這樣才能更快地成為大鳥，所以如果您想快速增長自己技術，讓自己別這麼菜，那就寫部落格吧！最近有幾個需求是關於仿ios的幾個...