vue-awesome-swiper实现循环滚动列表

1. 安装指定版本cnpm install vue-awesome-swiper@3 --save-dev
2. 在页面中引入插件

<template>
  <div class="scorllBox">
    <div class="scrollnameList">
      <p v-for="(item, index) in scorllBoxListName" :key="index">{{ item }}</p>
    </div>
    <div @mouseenter="on_top_enter" @mouseleave="on_top_leave">
      <swiper class="sm-content seamless-warp"
              :options="swiperOption()"
              :style="{height:scorllHeight + 'px'}"
              v-if="scorllBoxList.length > 0"
              ref="mySwiper"
      >
        <swiper-slide
                class="sm-li scroll_item"
                v-for="(item, idx) in scorllBoxList"
                :key="idx"
        >
          <span>{{ item.name }}</span>
          <span>{{ item.time }}</span>
          <span>{{ item.area }}</span>
          <span
                  v-if="item.state === '已处理' || item.state === '进入小区'"
                  style="color:#33a091"
          >{{ item.state }}</span
          >
          <span v-else style="color:#a27741">{{ item.state }}</span>
        </swiper-slide>
      </swiper
      >
    </div>
  </div>
</template>

<script>
//循环滚动
import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");

export default {
  components: {
    swiper,
    swiperSlide
  },
  props: {
    scorllBoxListName: {
      default: () => {
        return ["类别", "时间", "区域", "状态"];
      }
    },
    scorllHeight: {
      default: 180
    },
    scorllBoxList: {
      default: () => {
        return [];
      }
    }
  },
  //计算属性，获得可以操作的swiper对象
  computed: {
    mySwiper() {
      // mySwiper 是要绑定到标签中的ref属性
      return this.$refs.mySwiper.swiper
    }
  },
  data() {
    return {
    };
  },
  methods: {
    on_top_enter() {
      this.mySwiper.autoplay.stop()
      this.mySwiper.setTranslate(this.mySwiper.getTranslate());//鼠标移入立刻停止滚动
    },
    on_top_leave() {
      this.mySwiper.autoplay.start()
    },
    swiperOption () {
      return {
        notNextTick: true,
        direction: 'vertical',
        speed: 1500,//滚动速度
        autoplay: {
          delay: 1,
          disableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay
          waitForTransition: true,//等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
        },
        simulateTouch: false,//设置鼠标拖动无效
        freeMode: true,//free模式，slide会根据惯性滑动且不会贴合
        mousewheel: {
          sensitivity: 2,//滚动一次切换几个slide
        },
        loop: true,//循环
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        spaceBetween: 0,//slide之间的距离（单位px）
        slidesPerView: Number(this.scorllHeight)/30, //slide可见数量，30: 行高
      }
    },
  }
};
</script>

<style lang="less" scoped>
.scorllBox {
  border: 1px solid #153f55;
  overflow: hidden;
}
.seamless-warp {
  width: 100%;
  color: #fff;
  overflow: hidden;
  .scroll_item {
    border-bottom: 1px solid #184f70;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    cursor: pointer;
    line-height: 30px;
    height: 30px;
    box-sizing: border-box;
    span {
      flex: 1;
    }
  }
}
.scrollnameList {
  color: #fff;
  background-color: #042735cc;
  height: 30px;
  display: flex;
  justify-content: space-evenly;
  border-bottom: 1px solid #184f70;
  align-items: center;
  text-align: center;
  p {
    flex: 1;
    color: #c3cbd1;
  }
}
</style>

实现效果

3.实现无缝滚动

swiper默认样式的移动效果是transition-timing-function:ease-out，这里需要修改css样式如下：

/deep/.swiper-wrapper{
    transition-timing-function:linear !important;
  }

实现效果：

参考地址：https://blog.csdn.net/u012570307/article/details/107203851/