Vue 컴포넌트 실습: 슬라이딩 선택기 컴포넌트 개발

<template>
  <div class="slider">
    <div v-for="(option, index) in options" :key="index" class="slider-item">
      {{ option }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ['Option 1', 'Option 2', 'Option 3']
    };
  }
};
</script>

<style scoped>
.slider {
  display: flex;
}

.slider-item {
  flex: 1;
  height: 100px;
  border: 1px solid #ccc;
}
</style>

<script>
export default {
  data() {
    return {
      options: ['Option 1', 'Option 2', 'Option 3']
    };
  },
  mounted() {
    const container = this.$el;
    container.addEventListener('touchstart', this.handleTouchStart);
    container.addEventListener('touchmove', this.handleTouchMove);
    container.addEventListener('touchend', this.handleTouchEnd);
  },
  methods: {
    handleTouchStart(event) {
      // 记录滑动开始时的初始位置
    },
    handleTouchMove(event) {
      // 处理滑动过程中的位置变化
    },
    handleTouchEnd(event) {
      // 根据最终位置确定最终选择结果
    }
  }
};
</script>

handleTouchStart(event) {
  this.startY = event.touches[0].pageY;
}

handleTouchMove(event) {
  const currentY = event.touches[0].pageY;
  this.offsetY = currentY - this.startY;
}

handleTouchEnd(event) {
  const index = Math.round(this.offsetY / this.itemHeight);
  if (index >= 0 && index < this.options.length) {
    this.selected = this.options[index];
  }
}

<template>
  <div class="slider">
    <div v-for="(option, index) in options" :key="index" class="slider-item">
      {{ option }}
    </div>
    <div class="selected">{{ selected }}</div>
  </div>
</template>

<style scoped>
.selected {
  margin-top: 10px;
  text-align: center;
  font-weight: bold;
}
</style>