Swiper轮播图使用

393 阅读1分钟

安装Swiper

  1. 官方API文档:中文api - Swiper中文网
npm install  swiper

导入

//在main.js 引入样式
import "swiper/dist/css/swiper.min.css"  //可能会报错

组件中使用

  • 轮播图片固定情况
  • 设置容器:所有的swiper属性只有在swiper容器内才能发挥作用 swiper-container
  • 在设置容器时,需要绑定类名swiper-container,在新建swiper对象时,也同时需要获取到容器类名。因此可以在绑定容器固定类名后,再为不同的容器设置不同的类名或id,并创建不同的对象,以此来达到在一个容器中使用多个swiper轮播图的效果。
<template>
  <div class="container">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background: #00ffff">
          <img src="../../static/images/index/item3.jpg" />
        </div>
        <div class="swiper-slide" style="background: #006666">
          <img src="../../static/images/index/item2.jpg" />
        </div>
        <div class="swiper-slide" style="background: #006666">
          <img src="../../static/images/index/item1.jpg" />
        </div>
        <div class="swiper-slide" style="background: #006666">
          <img src="../../static/images/index/item4.jpg" />
        </div>
        <div class="swiper-slide" style="background: #006666">
          <img src="../../static/images/index/item5.jpg" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template><script>
//版本问题 需要单独引入Autoplay
import Swiper, { Autoplay } from "swiper";
Swiper.use([Autoplay]);
export default {
  data() {
    return {};
  },
  methods: {},
  mounted() {
  //Swiper初始化
    new Swiper(".swiper-container", {
      loop: true,
      // 如果需要分页器
      pagination: ".swiper-pagination",
      // 如果需要前进后退按钮
      nextButton: ".swiper-button-next",
      prevButton: ".swiper-button-prev",
      // 如果需要滚动条
      scrollbar: ".swiper-scrollbar",
      //自动轮播
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },
    });
  },
  created() {},
};
</script><style scoped ></style>
  • 异步请求拿到图片情况

    <template>
      <div class="banner" v-show="isShowSlide">
        <div class="swiper-banner">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in swiperList"
              :key="index"
            >
              <img
                src="images//img_loading.jpg"
                :data-src="item.imgpath"
                class="swiper-lazy"
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
          <!-- 开启分页 -->
          <div class="swiper-pagination" v-if="swiperList.length > 1">
            <span v-for="(item, index) in swiperList"></span>
          </div>
        </div>
      </div>
    </template>
    ​
    <script>
    import Swiper, { Autoplay } from "swiper";
    Swiper.use([Autoplay]);
    export default {
      data() {
        return {};
      },
      methods: {
        getImgs: function () {
          //created中调用
          let _this = this;
          _this.axios
            .get("请求链接")
            .then(function (res) {
              if (res.status === 200 && res.data.result === "0") {
                const data = res.data.message.list;
                for (let i in data) {
                  _this.swiperList.push(data[i]);
                }
                _this.swiperLength = _this.swiperList.length;
    ​
                _this.$nextTick(function () {
                  if (_this.swiperLength > 0) {
                    _this.isShowSlide = true;
                    if (_this.swiperLength == 1) {
                      _this.isAutoplay = 0;
                      _this.isLoop = false;
                    } else {
                      _this.isAutoplay = 3000;
                      _this.isLoop = true;
                    }
                    _this.mySwiper = new Swiper(".swiper-banner", {
                      autoplay: _this.isAutoplay,
                      loop: _this.isLoop,
                      autoplayDisableOnInteraction: false,
                      preventLinksPropagation: false,
                      lazyLoading: true, //懒加载开启
                      pagination: ".swiper-pagination",
                      observer: true, //修改swiper自己或子元素时,自动初始化swiper
                      observeParents: true, //修改swiper的父元素时,自动初始化swiper
                    });
                  } else {
                    _this.isShowSlide = false;
                  }
                });
              } else {
                _this.isShowSlide = false;
              }
            })
            .catch(function (err) {
              console.log(err);
            });
        },
      },
      mounted() {},
      created() {
        this.getImgs();
      },
    };
    </script>
    ​
    <style scoped ></style>