vue中swiper轮播图的使用

1.引包

说明:导入相应js引css

import "Swiper" from "swiper"

import "swiper/css/swiper.css";

import "swiper/js/swiper";

2.结构

说明:必要的结构使用;直接封装成一个组件

html 复制代码
<template>
        <div class="swiper-container" ref="cur">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="carousel in list"
              :key="carousel.id"
            >
              <img :src="carousel.imgUrl" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

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

3.new Swiper实例

说明:(页面当中务必要有结构);注释已经写入代码。

第一:可以解决获取数据在Swiper实例之前;第二:可以解决v-for遍历完后在Swiper之前。

javascript 复制代码
import Swiper from "swiper";
export default {
  name: "Carousel",
  props: ["list"],
  // 这样做的目的是在list属性发生变化时,
  // 能够及时更新Swiper轮播组件,以保证轮播的内容和效果与list属性的变化保持同步。
  watch: {
    list: {
      immediate: true,
      handler(newValue, oldValue) {
        // 这里有了数据还是不行,v-for有没有渲染也是问题,不能保证结构是否完成。
        // 用于在DOM更新后执行回调函数。在Vue中,当对数据进行修改后,DOM并不会立即更新,而是在下一个"tick"时进行更新。
        // 这个"tick"是Vue内部的更新队列,在执行用户逻辑之前进行DOM更新。
        this.$nextTick(function () {
          const mySwiper = new Swiper(this.$refs.cur, {
            loop: true,
            slidesPerView: "auto",
            slidesPerGroupAuto: true,
            autoplay: true,
            //如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
              //如果需要前进后退按钮
              navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
              },
            },
          });
        });
      },
    },
  },
};
相关推荐
会豪15 分钟前
Electron-Vite (一)快速构建桌面应用
前端
中微子18 分钟前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶19 分钟前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子20 分钟前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_1 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark1 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23331 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin1 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_1 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit1 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言