swiper轮播图的使用

sgj191024 / 2023-08-07 / 原文

这里使用的是swiper5

npm install swiper@5

main.js引入 import "swiper/css/swiper.min.css"

页面用

import Swiper from "swiper";

 <div class="swiper-container" id="mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in banners" :key="index">
              <img :src="item.imgUrl" />
            </div>
            
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>

watch + nexttick

watch: {
    banners: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          var mySwiper = new Swiper(".swiper-container", {
            loop: true,
            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              //点击小球的时候也切换图片
              clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
            //一页展示几张图片
            slidesPerView: 1,
          });
        });
      }
    }
  },