当前位置：首页 > VUE

vue简单实现picker效果

2026-01-20 05:50:35VUE

Vue 实现 Picker 效果

在 Vue 中实现 Picker 效果可以通过自定义组件或使用第三方库完成。以下是两种常见方法：

自定义滚动选择器

使用原生滚动行为实现 Picker 效果，适用于简单场景：

<template>
  <div class="picker-container">
    <div class="picker-mask"></div>
    <div class="picker-content" @scroll="handleScroll">
      <div 
        v-for="(item, index) in items" 
        :key="index" 
        class="picker-item"
        :class="{ 'active': activeIndex === index }"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['选项1', '选项2', '选项3', '选项4', '选项5'],
      activeIndex: 0
    }
  },
  methods: {
    handleScroll(e) {
      const scrollTop = e.target.scrollTop;
      const itemHeight = 40; // 每个选项高度
      this.activeIndex = Math.round(scrollTop / itemHeight);
    }
  }
}
</script>

<style>
.picker-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.picker-content {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.picker-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
}

.picker-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom, 
    rgba(255,255,255,0.9) 0%, 
    rgba(255,255,255,0.7) 30%, 
    transparent 50%, 
    transparent 50%, 
    rgba(255,255,255,0.7) 70%, 
    rgba(255,255,255,0.9) 100%
  );
}

.active {
  color: #409EFF;
  font-weight: bold;
}
</style>

使用第三方库

对于更复杂的需求，推荐使用成熟的 Picker 组件库：

安装 vant 组件库：
```
npm install vant
```

使用 Picker 组件：


<template>
<van-picker
 v-model="currentValue"
 :columns="columns"
 @change="onChange"
/>
</template>

import { Picker } from 'vant';

export default { components: {

}, data() { return { columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'], currentValue: '杭州' } }, methods: { onChange(picker, value, index) { console.log(当前值：${value}, 当前索引：${index}); } } }

```