当前位置：首页 > VUE

vue实现类似picker效果

2026-02-22 00:46:40VUE

实现类似 Picker 效果的 Vue 组件

使用原生 HTML 和 CSS 实现基础 Picker

通过 input 元素的 type="date" 或 type="time" 可以快速实现原生选择器效果，但样式受限。

<template>
  <input type="date" v-model="selectedDate">
</template>

<script>
export default {
  data() {
    return {
      selectedDate: ''
    }
  }
}
</script>

使用第三方库（如 Vant 或 Element UI）

Vant 的 Picker 组件提供高度可定制的选择器：

<template>
  <van-picker
    v-model="currentValue"
    :columns="columns"
    @confirm="onConfirm"
  />
</template>

<script>
import { Picker } from 'vant';

export default {
  components: {
    [Picker.name]: Picker
  },
  data() {
    return {
      currentValue: '',
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
    }
  },
  methods: {
    onConfirm(value) {
      console.log('Selected:', value);
    }
  }
}
</script>

自定义滚动选择器实现

通过 CSS 动画和触摸事件实现自定义滚动选择器：

<template>
  <div class="picker-container">
    <div 
      class="picker-wheel"
      ref="wheel"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    >
      <div 
        v-for="(item, index) in items" 
        :key="index"
        class="picker-item"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      startY: 0,
      currentY: 0
    }
  },
  methods: {
    onTouchStart(e) {
      this.startY = e.touches[0].clientY;
    },
    onTouchMove(e) {
      this.currentY = e.touches[0].clientY - this.startY;
      this.$refs.wheel.style.transform = `translateY(${this.currentY}px)`;
    },
    onTouchEnd() {
      // 添加惯性滚动逻辑和选中判定
    }
  }
}
</script>

<style>
.picker-container {
  height: 200px;
  overflow: hidden;
  position: relative;
}
.picker-wheel {
  transition: transform 0.3s ease-out;
}
.picker-item {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
</style>

使用 CSS Scroll Snap 实现

现代浏览器支持的 CSS Scroll Snap 可以轻松实现捕捉效果：

vue实现类似picker效果

<template>
  <div class="snap-picker">
    <div 
      v-for="(item, index) in items" 
      :key="index"
      class="snap-item"
    >
      {{ item }}
    </div>
  </div>
</template>

<style>
.snap-picker {
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.snap-item {
  height: 40px;
  scroll-snap-align: center;
}
</style>