vue 使用swiper4并调用接口展示含有分页的数组图片

1、安装

npm install --save swiper@4

2、在main.js中配置

import 'swiper/dist/css/swiper.min.css'

3、初始化轮播图组件并接口请求成功之后调用轮播图

initSwiper() {
        let that = this
        swiper = new Swiper('.swiper-container', {
          on: {
            reachEnd: function () {
              console.log('到了最后一个slide')
              if (that.isLast == false) {
                that.page++
                that.getFengcai() //分页数据接口
              } else {
                console.log(that.isLast, '执行这里')
                return
              }
            },
          },
          loop: true, //允许从第一张到最后一张，或者从最后一张到第一张  循环属性
          slidesPerView: 4, // 设置显示三张
          //centeredSlides : true,     //使当前图片居中显示
          freeMode: true, // 使幻灯片滑动时不止滑动一格，且不会自动贴合
          slidesPerGroup: 1, //定义1张图片为一组
          // autoplay: true, //可选选项，自动滑动
          spaceBetween: 20,
          speed: 2600, //设置过度时间
          grabCursor: true, //鼠标样式根据浏览器不同而定

          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },

          autoplay: {
            delay: 0,
            // stopOnLastSlide: false,
            disableOnInteraction: false,
          }, // 可选选项，自动滑动
        })
      },

4、更新轮播图数据

          swiper.autoplay.stop()
          this.$nextTick(function () {
            this.initSwiper()
            swiper.autoplay.start()
          })