移动端 h5 滚动选择框

<template>
  <div class="pickerFild">
    <div class="btn" @click="$emit('callback',list[cache_current])">确定</div>
    <div class="_current"></div>
    <div
      @scroll.prevent
      @touchstart="touch_start"
      @touchmove.prevent="touch_move"
      @touchend="touch_end"
    >
      <div v-show="current == 0 || current == 1" class="current_step3"></div>
      <div v-show="current == 0 " class="current_step2"></div>
      <div
        class="item"
        @click="cache_current = current = index"
        v-for="(item,index) in list"
        ref="item"
        :key="item"
        :class="{ 
            current : current == index ,  
            current_step2: index == (current - 1) || index == (current + 1)  ,
            current_step3: index == (current - 2) || index == (current + 2)  ,
        }"
      >{{item}}</div>
      <div
        v-show="current == list.length - 1 ||  current == list.length - 2 "
        class="current_step2"
      ></div>
      <div v-show="current == list.length - 1" class="current_step3"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      //   list: [10, 20, 30, 40, 50, 60, 70, 80, 90],
      current: 0,
      cache_current: 0,
      startY: 0,
      moveY: 0
    };
  },
  mounted() {},
  computed: {
    currentDomHeight() {
      return this.$refs.item[this.cache_current].offsetHeight / 2;
    }
  },
  methods: {
    //  长度 滚动长度
    computeStyle(size) {},
    touch_start(e) {
      this.startY = e.targetTouches[0].pageY;
    },
    touch_move(e) {
      this.moveY = e.targetTouches[0].pageY;
      let movestep = parseInt(
        (this.startY - this.moveY) / this.currentDomHeight
      );
      if (movestep > 4) movestep = 5;
      if (movestep < -4) movestep = -5;
      let moveIndex = this.cache_current + movestep;
      if (moveIndex < 0) this.current = 0;
      else if (moveIndex >= this.list.length)
        this.current = this.list.length - 1;
      else this.current = moveIndex; 
    },
    touch_end(e) {
      this.cache_current = this.current;
    }
  }
};
</script>
<style lang="scss" scoped>
$rootSize: 16px!default;
$designWidth: 375px!default;
$designRatio: 2!default;

@function rem($px) {
    @return $px / $rootSize / $designRatio * 1rem;
}
@function rootVw() {
    @return $rootSize / $designWidth * $designRatio * 100vmin;
}

html{
  font-size: rootVw();
}
body{
  // padding: 15px;
  font-size: 16px;
}

@mixin textEllipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pickerFild {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  height: rem(170px);
  padding: rem(12px);
  padding-top: rem(24px);
  z-index: 999;
  overflow: hidden;
  > .touchView {
    padding: rem(49px) * 0.5 + rem(49px) * 0.7 0;
  }
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0;
    border-radius: rem(3px);
    font-size: rem(23px);
    font-family: PingFang SC Semibold, PingFang SC Semibold-Semibold;
    font-weight: 600;
    text-align: left;
    color: #f98b10;
    letter-spacing: rem(1px);
    transform: scale(0);
    transition: all 0.095s;
  }
  ._current {
    background: rgba(250, 205, 137, 0.3);
    height: rem(49px);
    position: absolute;
    left: rem(12px);
    right: rem(12px);
    top: rem(49px) * 0.5 + rem(49px) * 0.7 + rem(24px);
  }
  .current {
    transform: scale(1);
    height: rem(49px);
  }
  .current_step2 {
    transform: scale(0.8);
    opacity: 0.6;
    height: rem(49px) * 0.7;
  }
  .current_step3 {
    height: rem(49px) * 0.5;
    opacity: 0.2;
    transform: scale(0.6);
  }
  > .btn {
    width: rem(52px);
    height: rem(28px);
    background: #5279fe;
    border-radius: rem(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: rem(13px);
    font-family: PingFang SC Semibold, PingFang SC Semibold-Semibold;
    font-weight: 600;
    text-align: left;
    position: absolute;
    top: rem(11px);
    right: rem(11px);
    color: #ffffff;
  }
}
</style>