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

原创于 2022-04-11 10:44:20 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

vue本地打包专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何在项目中安装并配置Swiper库来创建轮播图组件。首先，通过npm安装Swiper，并在main.js中引入样式文件。接着，详细阐述了初始化轮播图的方法，包括设置轮播图的各种属性，如loop、slidesPerView等，并监听滑动到底部的事件以实现自动分页加载数据。最后，展示了如何更新轮播图数据及控制自动播放。

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()
          })