네이티브 iOS 시간 선택 구성 요소 개발 경험을 모방하는 vue.js 구현

서문
지난 몇 달 동안 VUE를 살펴보다가 네이티브 js만 사용하여 일부 구성 요소를 구현해 보았습니다+뷰 .
PC 시간 선택 컴포넌트 PC에서 시간 선택을 처음으로 구현한 것인데 모바일에서도 구현이 되어서 시간 선택기를 모바일에서 구현해보고자 합니다. 모바일로 구현해봤습니다 엔드스크롤휠 특수효과 시간선택기의 아이디어와 과정입니다. 전체 구성 요소는 vue-cli
함수
1. 시간 선택 [

A.年月日选择

B.年月日小时分钟选择

C. 시간 및 분 선택]
2. 스크롤 휠 효과 [
rree

B. end-to-end 연결을 구성하지 않음]

3. 시간 선택 범위 설정(선택한 시간이 초과되면 팝업창 표시) 범위), 분 간격 설정
4.
다국어설정5. 시간 형식 설정은 yyyy/MM/dd HH:mm
6. 기본 iOS 효과에 가깝습니다
7. 확장 프로그램은 시간을 선택할 수 있을 뿐만 아니라 사용자 정의 연결 선택 데이터도 전달할 수 있습니다
여기에서는 주로 무한 스크롤 구현에 대해 이야기합니다

데이터 준비 1여기서 받으세요
아아아아

설명하겠습니다

한 달의 일수를 구하는 영리한 방법입니다.

정적

효과 구현

스크롤 휠의 정적인 효과를 구현하는 방법은 다양합니다

1. 시각적인 3D 효과 [그림자 추가]

2. . 실제 3D 효과[ CSS3D]

A.构成一个圆环首尾相连

CSS3D를 사용한 두 번째 구현입니다.설명

먼저 선택 범위 선택 범위 내부와 외부의 스크롤 휠에 차이가 있습니다

그래서 이러한 차이를 효과적으로 구현하기 위해 2개의 돔 구조를 사용하여 구현하기로 결정했습니다. 1개의 DOM은 스크롤 휠을 구현하는 것이고, 1개의 DOM은 이를 구현하는 것입니다. 검정색 선택 효과를 적용하면 원래 효과와 비슷한 차이가 나도록 합니다.

天

다양한 옵션을 설치합니다. 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

는 선택된 2줄,

monthList

가장 바깥쪽의 검정색 효과 데이터를 구현합니다.

hourList

회색 롤러 부분

minuteList

我把实现效果大致分为上面2种，具体的大家可以自己搜索相关资料，这里展开涉及太多就带过好了

주로 관련된 CSS

속성

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

입니다 여기에서도 사용됩니다. dayList가 초기 데이터 [1,2,3,4,...,30,31]로 사용됩니다.

여기서 렌더링 데이터로 매번 19개의 데이터를 가져오고, renderListDay 초기 렌더링이 필요합니다. [23 ,24,25,26,27,28,29,30,31,1,2,3,4,5,6,7,8,9,10]
가운데 숫자가 바로 1이기 때문이죠. (초기화 중에만)

day-wheel

는 데이터를 가져오는 방법으로, 0보다 작으면 뒤로 가져오고, 0보다 크면 앞으로 가져옵니다원래 데이터 길이보다 큰 인덱스는 %를 사용하여 계산됩니다. 정상 범위에 해당하는 인덱스를 얻으므로 위 스핀은 데이터를 가져오는 포크입니다(초기에는 -9부터 9까지)

<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: &#39;rotate3d(1, 0, 0, &#39;+ (-day.index)*20%360+&#39;deg) translate3d(0px, 0px, 2.5rem)&#39;}">{{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,&#39;day&#39;)" v-on:touchmove="myMove($event,&#39;day&#39;)" v-on:touchend="myEnd($event,&#39;day&#39;)">
  <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: &#39;rotate3d(1, 0, 0, &#39;+ (-day.index)*20%360+&#39;deg) translate3d(0px, 0px, 2.5rem)&#39;}">
     {{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 중국어 웹사이트의 기타 관련 기사를 참조하세요!