Vue脚手架的swiper轮播图如何使用

swiper轮播图

官网链接:

1、swiper轮播图的npm下载

安装:vue2的4.1.1 和swiper5.0x版本

npm i vue-awesome-swiper@4.1.1 swiper@5.x -S //安装

2、在需要的组件中引入

在export default 下方引入

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css' 

3、注册

components：{}下方注册

 components: {
    Swiper,
    SwiperSlide,
    // singgerView,
  },

4、组件上方的template里面写入

banner数据是在data里面进行是一个获取

data

data里面的return的banner：[]数组

 data() {
    return {
      banner: [], //轮播图swiper
      swiperOptions: {
        //swiper轮播图配置
        effect: "cube",
        grabCursor: true,
        cubeEffect: {
          shadow: true,
          slideShadows: true,
          shadowOffset: 5,
          shadowScale: 0.78,
        },
        speed: 2500,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        pagination: {
          el: ".swiper-pagination",
        },
      },
    };
  },

获取赋值banner数据

methods 和一个created生命周期函数进行调用之后就有数据

网易云的接口

methods：

  methods: {
    // 获取轮播图的数据
    async getBanners() {
      await this.axios.get("/banner").then((re) => {
        this.banner = re.banners;
      });
    },
  },

created（）{}

 created() {
    //调用methods方法获取的方式
    this.getBanners();

  },

调用

  <!-- swiper 支持移动 支持滑动效果... -->
    <swiper :options="swiperOptions">
      <swiper-slide v-for="b in banner" :key="b.imageUrl">
        <img :src="b.imageUrl" class="banner-item" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>