Swiper5的使用

2022-08-28 00:30:30 阅读：202 来源： 互联网

标签：初始化 button watch swiper 使用 Swiper5 true Swiper

Vue2中 Swiper5的使用

vue2 一般使用swiper5

安装

npm i swiper@5.0.1

在main.js中引入

import 'swiper/css/swiper.css'

在需要使用的组建里面引入

import Swiper from "swiper";

组件上template使用

//banner轮播
  <div class="swiper-container" id="mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="carousel in getBannerList" :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>

初始化Swiper

mounted或者watch的配置方法,用于初始化一个Swiper，返回初始化后的Swiper实例。两者都可以实现,看实际情况使用

mouted配置方法

//mouted配置方法
mounted() {
    var mySwiper = new Swiper(".swiper-container", {
      // direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      /* scrollbar: {
            el: '.swiper-scrollbar',
        }, */
    });
  }

在mounted中直接初始化可能存在一些问题:dom还没有更新后就初始化了。
解决办法:settimeout,但不推荐。
可以在watch配置方法里面写

watch配置方法

  //watch
  watch: {
    list(监听对象): {
      // 立即监听,不管数据是否变化,立即执行一次,看情况使用
      immediate: true,
      deep:true,//深度监听,也是看情况使用
      handler(newValue, oldValue) {
        this.$nextTick(function () {
          // ".swiper-container"可以换成this.$refs.mySwiper
          var mySwiper = new Swiper(this.$refs.floor1Swiper, {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },

            // 自动切换
            autoplay: true, //等同于以下设置

            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },

            // 如果需要滚动条
            // scrollbar: {
            //         el: '.swiper-scrollbar',
            //     },
          });
        });
      },
    },
  }

标签：初始化,button,watch,swiper,使用,Swiper5,true,Swiper
来源： https://www.cnblogs.com/qiuguanhua/p/16631836.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9