# swiper匀速循环滚动


<style>
    .swiper-container .swiper-wrapper{
    -webkit-transition-timing-function: linear; /*之前是ease-out*/
    -moz-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
    }
</style>

<template>
  <div v-if="list.length" class="swiper">
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide v-for="(item, index) in list" :key="index">
        <img :src="item.imageUrl" class="swiper-wrap__item__img" :alt="item.desc" :x="item.code" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script lang="ts">
type ListItem = {
  code: number;
  desc: string;
  imageUrl: string;
};
type List = Array<ListItem>;
import Vue from 'vue';
export default Vue.extend({
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      swiperOption: {
        // autoplay: {
        //   delay: 0,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: true,
        // },
        // slidesPerView: 'auto',
        // loopedSlides: 8,
        // loop: true

        slidesPerView: 'auto', //自适应宽度
        loop: true, //循环滚动
        speed: 1000, //滚动速度2500
        autoplay: { //匀速滚动
            delay: 0, //间隔时间0秒
            stopOnLastSlide: false,
            disableOnInteraction: false, //触摸后仍然执行
        }
      }
    };
  }
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62