当前位置：首页 > VUE

vue实现可滑动列表

2026-02-21 05:58:58VUE

vue实现可滑动列表的方法

使用第三方库（如better-scroll）

安装better-scroll库：

npm install better-scroll --save

在Vue组件中引入并使用：

import BScroll from 'better-scroll'

export default {
  data() {
    return {
      scroll: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        scrollY: true,
        click: true
      })
    })
  }
}

模板结构：

<div ref="wrapper" class="wrapper">
  <div class="content">
    <!-- 列表内容 -->
    <div v-for="item in list" :key="item.id">{{item.text}}</div>
  </div>
</div>

样式设置：

.wrapper {
  height: 300px;
  overflow: hidden;
}

使用原生CSS实现

通过CSS的overflow和scroll-snap属性实现简单滑动：

模板结构：

<div class="scroll-container">
  <div v-for="item in list" :key="item.id" class="scroll-item">
    {{item.text}}
  </div>
</div>

CSS样式：

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.scroll-item {
  flex: 0 0 auto;
  width: 100%;
  scroll-snap-align: start;
}

使用Touch事件手动实现

通过监听touch事件实现自定义滑动：

export default {
  data() {
    return {
      startX: 0,
      moveX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
    },
    handleTouchMove(e) {
      this.moveX = e.touches[0].clientX - this.startX
      // 根据moveX的值设置transform
    },
    handleTouchEnd() {
      // 处理滑动结束后的逻辑
    }
  }
}

使用Vant等UI框架

如果使用Vant UI框架，可以直接使用其滑动组件：

<van-swipe :autoplay="3000">
  <van-swipe-item v-for="item in list" :key="item.id">
    {{item.text}}
  </van-swipe-item>
</van-swipe>

性能优化建议

对于长列表，建议使用虚拟滚动技术，可以结合vue-virtual-scroller库实现：

npm install vue-virtual-scroller

使用示例：

import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: {
    RecycleScroller
  }
}

模板：

vue实现可滑动列表

<RecycleScroller
  class="scroller"
  :items="list"
  :item-size="50"
  key-field="id"
>
  <template v-slot="{ item }">
    <div>{{ item.text }}</div>
  </template>
</RecycleScroller>