서문
지난 몇 달 동안 VUE를 살펴보다가 네이티브 js만 사용하여 일부 구성 요소를 구현해 보았습니다+뷰 .
PC 시간 선택 컴포넌트 PC에서 시간 선택을 처음으로 구현한 것인데 모바일에서도 구현이 되어서 시간 선택기를 모바일에서 구현해보고자 합니다. 모바일로 구현해봤습니다 엔드스크롤휠 특수효과 시간선택기의 아이디어와 과정입니다. 전체 구성 요소는 vue-cli
함수
1. 시간 선택 [
A.年月日选择
B.年月日小时分钟选择
C. 시간 및 분 선택]
<을 기반으로 구성됩니다. 🎜>2. 스크롤 휠 효과 [
rree
3. 시간 선택 범위 설정(선택한 시간이 초과되면 팝업창 표시) 범위), 분 간격 설정
4.
다국어설정5. 시간 형식 설정은 yyyy/MM/dd HH:mm
6. 기본 iOS 효과에 가깝습니다
7. 확장 프로그램은 시간을 선택할 수 있을 뿐만 아니라 사용자 정의 연결 선택 데이터도 전달할 수 있습니다
여기에서는 주로 무한 스크롤 구현에 대해 이야기합니다
데이터 준비 1여기서 받으세요
아아아아
한 달의 일수를 구하는 영리한 방법입니다. <… 끝이 난다.
효과 구현
스크롤 휠의 정적인 효과를 구현하는 방법은 다양합니다
1. 시각적인 3D 효과 [그림자 추가]2. . 실제 3D 효과[ CSS3D]A.构成一个圆环首尾相连
먼저 선택 범위 선택 범위 내부와 외부의 스크롤 휠에 차이가 있습니다
그래서 이러한 차이를 효과적으로 구현하기 위해 2개의 돔 구조를 사용하여 구현하기로 결정했습니다. 1개의 DOM은 스크롤 휠을 구현하는 것이고, 1개의 DOM은 이를 구현하는 것입니다. 검정색 선택 효과를 적용하면 원래 효과와 비슷한 차이가 나도록 합니다.
天
dayList () {
/* get currentMonthLenght */
let currentMonthLength = new Date(this.tmpYear, this.tmpMonth + 1, 0).getDate();
/* get currentMonth day */
let daylist = Array.from({length: currentMonthLength}, (value, index) => {
return index + 1
});
return daylist
},
yearList
monthList
hourList
회색 롤러 부분
minuteList
我把实现效果大致分为上面2种，具体的大家可以自己搜索相关资料，这里展开涉及太多就带过好了
속성
picker-panel
3D 효과를 보여줍니다.
box-day
check-line
day-list
원의 반경
위에서 보듯이 는 효과 스테레오그램입니다. 우리의 롤러 r은 번역된 3d(0px,0px,2.5rem) CSS에서 2.5rem입니다. 이 CSS가 없으면 모든 데이터가 원의 중심에 모일 것입니다
위 사진은 회전되지 않습니다(빨간색은 우리가 보는 데이터 효과를 나타냄) 
이미지는 회전됩니다(빨간색과 주황색은 우리가 보는 데이터 효과를 나타냄)
각도 파란색 호로 표시되는 것은 동일하며(각도에 대한 지식이 포함됨), 또한 회전3d CSS에 있는 시각적 회전 각도입니다. 80deg의 경우 각 공간이 20도가 됩니다. x축만 회전하고 원의 중심각도 회전시켜 전체 링을 퍼뜨립니다. 완전한 원은 360/20 데이터를 담을 수 있고 육안으로 앞의 데이터를 볼 수 있으므로 특정 각도 이후에는 뒤에 있는 것이 보이지 않아야 합니다. 그리고 -webkit-backface-visibility: hide; 효과가 있었음을 의미합니다. 
rree
효과는 아래 사진과 비슷합니다
그래서 2차 데이터 준비가 있습니다
데이터 준비 2
여기서 렌더링 데이터로 매번 19개의 데이터를 가져오고, renderListDay 초기 렌더링이 필요합니다. [23 ,24,25,26,27,28,29,30,31,1,2,3,4,5,6,7,8,9,10]
가운데 숫자가 바로 1이기 때문이죠. (초기화 중에만) 
day-wheel
<p class="picker-panel">
<!--other box-->
<p class="box-day">
<p class="check-line"></p>
<p class="day-checked">
<p class="day-list">
<p class="list-p" v-for="day in renderListDay">
{{day.value}}
</p>
</p>
</p>
<p class="day-wheel">
<p class="wheel-p" v-for="day in renderListDay" transform: rotate3d(1, 0, 0, 80deg) translate3d(0px, 0px, 2.5rem);>
{{day.value}}
</p>
</p>
</p>
<!--other box-->
</p><p class="wheel-p" v-for="day in renderListDay" v-bind:data-index="day.index" v-bind:style="{transform: 'rotate3d(1, 0, 0, '+ (-day.index)*20%360+'deg) translate3d(0px, 0px, 2.5rem)'}">{{day.value}}{{day.value}}</p>接着需要旋转到我们需要的角度，跟我们的初始化时间对上,this.orDay-this.DayList[0] 是获取偏移量来矫正角度
this.$el.getElementsByClassName('day-wheel')[0].style.transform = 'rotate3d(1, 0, 0, ' + (this.orDay - this.dayList[0]) * 20 + 'deg)';
增加touch事件
剩下的事就很好处理了，给对应的dom绑定事件根据touchmove的距离来转换成旋转的角度 和check-list的位移这里translateY是用来记录实际移动的距离的，最后输出需要算入偏移量
<p class="box-day" v-on:touchstart="myTouch($event,'day')" v-on:touchmove="myMove($event,'day')" v-on:touchend="myEnd($event,'day')">
<p class="check-line"></p>
<p class="day-checked">
<p class="day-list" data-translateY="0" style="transform: translateY(0rem)">
<p class="list-p" v-for="day in renderListDay" v-bind:data-index="day.index">
{{day.value}}
</p>
</p>
</p>
<p class="day-wheel" style=" transform: rotate3d(1, 0, 0,0deg)">
<p class="wheel-p" v-for="day in renderListDay" v-bind:data-index="day.index" v-bind:style="{transform: 'rotate3d(1, 0, 0, '+ (-day.index)*20%360+'deg) translate3d(0px, 0px, 2.5rem)'}">
{{day.value}}
</p>
</p>
</p>惯性滚动
这个实现我是用了一个 cubic-bezier(0.19, 1, 0.22, 1)
判断手势是不是flicker 如果是flicker通过一个瞬时速度来算出位移，和时间，然后一次性设置，然后用transition做惯性滚动,
普通拖动 设置1秒
这个实际效果还是有点不好，以后来改进。
其他功能的实现
这里不做详细说明了
总结
自适应方面用了手淘的解决方案
这次实现这个组件最困难的就是实现无限滚动，和无限滚动的渲染数据的构造，接着就是惯性滚动的实现。
已知问题
1.惯性滚动不完美
2.无限滚动实现了。非无限滚动没实现，就是渲染数据就是[1,2,3,4,5,6,7,8,9,10]
3.现在选择必须 年月日 或者年月日小时分钟 不能单独选小时或者分钟
위 내용은 네이티브 iOS 시간 선택 구성 요소 개발 경험을 모방하는 vue.js 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
