Vue3使用Swiper实现列表内容循环滚动效果

作者：谭东

vue3项目创建：

npm install -g @vue/cli或npm install -g '@vue/cli'

 旧版本卸载：

npm uninstall vue-cli -g

项目创建：

 vue create 项目名称（例如： vue create abc）

先上效果图：

我们要实现的效果就是在Vue3中使用swiper实现列表内容向上循环滚动效果，而且是每次滚动一条内容。其实这个效果是我在写大屏内容滚动页面时用到的。

我这里使用的swiper版本是8.1.1。安装命令为：npm i swiper。

1、先在vue模板页面里编写代码。

<template>
    <div class="dataListZone">
      <swiper id="swiperList2" v-if="data.list2" :slides-per-view="5"
        :autoplay="{ delay: 2000, disableOnInteraction: false }" :speed="500" :space-between="5" :direction="'vertical'"
        :scrollbar="{ draggable: false }" :loop="true" :modules="data.modules" style="height: 240px">
        <swiper-slide v-for="(item, index) in data.list2" :key="index">
          <li class="listItem type1">
            <a :title="item.title">{
   
   { item.title }}</a>
          </li>
        </swiper-slide>
      </swiper>
    </div>
</template>

其中，

:slides-per-view：表示页面默认展示出多少条数据item；

:space-between：表示每个item之间的间距；

style="height: 240px"：这里设置的是整个swiper滚动区域的高度范围，然后我们的每个<swiper-slide></swiper-slide>里的item要根据你显示的数量设置好，例如这里高度除以5再减去4个间隔，即是每个item的高度。

2、编写script里内容。

<script setup>
import { getCurrentInstance, onMounted, ref, reactive } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper';
import 'swiper/css';

const { proxy } = getCurrentInstance();

const data = ref({
  list2: null,
  modules: [Autoplay],
});

onMounted(() => {
  getData();
});

function getData() {
  let jsonUrl = './data/data_2022_03.json?' + new Date().getTime();
  proxy.Axios.get(jsonUrl).then((res) => {
    data.value.list2 = res.data.leftBottomNJMK;
  });
}

</script>

这里需要将Swiper和SwiperSlide库导入引用进来，同时自动滚动Autoplay也需要单独导入进来，默认是没有的。然后用modules将Autoplay配置上即可。