Vue에서 선택기 효과를 구현하는 방법

이 글은 주로 iOS 네이티브 피커 효과의 Vue 구현과 구현 아이디어 분석을 소개합니다. 이 글은 매우 자세하게 소개하고 참고할 가치가 있습니다.

유사 시간 선택 플러그인 이전에 처음 구현되었지만 적용 범위가 너무 좁기 때문에 최근에 이 구현을 릴리스하고 재사용 가능성이 높은 vue 구성 요소를 다시 작성하고 싶습니다.

Android 4.0 이상, Safari 7 이상 지원

효과 미리보기

gitHub

스크롤 휠 부분의 주요 돔 구조

<template data-filtered="filtered">
 <p class="pd-select-item">
  <p class="pd-select-line"></p>
  <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>
 </p>
</template>
props
props: {
   data: {
    type: Array,
    required: true
   },
   type: {
    type: String,
    default: &#39;cycle&#39;
   },
   value: {}
  }

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 스타일 설정

/* 滚轮盒子 */
.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가지 속성에 주의하세요: 변형 스타일: 보존-3d; 뒷면-가시성: 숨겨진;

첫 번째는 인터페이스를 3D로 만들기 위한 3D 레이아웃입니다. 두 번째는 스크롤 휠의 뒷면을 자동으로 숨기는 방법입니다(1부) 그림의 빨간색 부분은 뒷면의 DOM 노드가 자동으로 숨겨지는 부분입니다.)

3D 스크롤 휠 구현 방법

박스 주로 다음 CSS 변환을 사용합니다:rotate3d(1, 0, 0, x deg);

항목은 주로 다음 CSS 변환을 사용합니다:rotate3d(1, 0, 0, xdeg)translate3d(0px, 0px, [x]px);

위 2개의 사진은 번역 3d(0px, 0px, [x]px)를 보여줍니다. 이 문장의 효과 [x]는 원의 반경입니다

에서 볼 수 있듯이 위 그림에서는 각 돔 자체를 회전시킨 다음 변환3d(0px, 0px, [x]px)를 사용하면 됩니다. 각 돔은 확장되어

링을 형성합니다. 왜냐하면 α는 각 돔의 회전 각도이기 때문입니다. 여기서는 0 ~ 180°가 사용되며 이러한 돔을 보관하는 데 상자가 사용됩니다

행 높이 및 각도 계산

두 변과 각도를 알면 세 번째 변의 길이를 계산하세요~=34px

http://tool.520101.com/calculator/sanjiaoxingjiaodu/

무한 스크롤 휠 구현

/* 滚轮展示大小限定 */
spin: {start: 0, end: 9, branch: 9}
 
/* 获取spin 数据 */
 getSpinData (index) {
  index = index % this.listData.length
  return this.listData[index >= 0 ? index : index + this.listData.length]
 }
 /* 模运算 获取数组有的索引 这样就构成 圆环了 */

touchend는 특수 처리를 수행합니다.

스크롤링 데이터를 반올림하도록 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 === &#39;line&#39;) {
     return index < 0 || index > this.listData.length - 1
    } else {
     return false
    }
   },

dom 구조 해당 응답도 추가되었습니다

<p class="pd-select-item">
  <p class="pd-select-line"></p>
  <p class="pd-select-list">
   <ul class="pd-select-ul" ref="list">
    <li class="pd-select-list-item" v-for="el,index in renderData " :class="{&#39;hidden&#39;:setHidden(el.index)}" :key="index">{{el.value}}</li>
   </ul>
  </p>
  <ul class="pd-select-wheel" ref="wheel">
   <li class="pd-select-wheel-item" :class="{&#39;hidden&#39;:setHidden(el.index)}" :style="setWheelItemDeg(el.index)" :index="el.index" v-for="el,index in renderData " :key="index">{{el.value}}</li>
  </ul>
 </p>

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JavaScript 모듈 최적화

webpack을 사용하여 타사 라이브러리를 추출하는 방법

JS를 사용하여 클라이언트 유형을 확인하는 방법

위 내용은 Vue에서 선택기 효과를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!