关于一次swiper无限滚动的开发笔记

项目需求很简单，某个类目，横向排布。超出自动横向无缝滚动。自然而然想到直接使用swiper。
第一步，安装swiper

npm install vue-awesome-swiper --save

第二步项目中引入

import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

第三步在需要使用的组件中使用

html：
          <div class="swiper-container1 price-content scroll-content" v-else>
            <div class="swiper-wrapper scroll-content-wrap">
              <div class="price-item swiper-slide" v-for="(item, index) in priceList" :key="index">
                <div class="price-yuan" :style="{background: item.bgColor}">{{item.categoryName}}</div>
                <div class="price-num">{{item.unitPrice}}元/每斤</div>
              </div>
            </div>
          </div>
  js：
         var mySwiper1 = new Swiper(".swiper-container1", {
                  loop: true,
                  speed: 4000, //匀速时间
                  slidesPerView: 4,
                  spaceBetween: 30,
                  autoplay: {
                    delay: 0,
                    stopOnLastSlide: false,
                    disableOnInteraction: false
                  }
           });

第四步：需要对swiper本身的css样式进行修改。

<style lang="less">
/**swiper轮播组件改成无限滚动的样式调整（必须） */
.swiper-container1 {
  .swiper-wrapper {
    transition-timing-function: linear !important;
  }
}
</style>