15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 vue/vuex

使用不同版本的Swiper需要注意的地方

梁鹏翱| 发布于 2021-11-24 15:29:55| 652阅读| 0点赞| 0评论
举报

vue中使用不同版本的Swiper

因为随着swiper的版本更新,各种版本出现的写法有所不同

swiper3

npm install swiper@3 --save-dev

因为版本的更新,swiper3逐渐使用的越来越少,但是还是有很多不必要的坑,

我们下载完之后只需要在全局main.js里面引入:

import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'

引入之后我们就可以使用了,加上我们所需要的东西

dom结构

<div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1div>
        <div class="swiper-slide">Slide 2div>
        <div class="swiper-slide">Slide 3div>
      div>
      
      <div class="swiper-pagination">div>
 
      
      <div class="swiper-button-prev">div>
      <div class="swiper-button-next">div>
 
      
      <div class="swiper-scrollbar">div>
div>

之后在我们的mounted生命周期里面

new Swiper(".swiper-container", {
      //自动轮播,这里直接写毫秒就可以了
      autoplay: 3000,
 
      //设置环路
      loop: true,
 
      // 如果需要分页器
      pagination: ".swiper-pagination",
 
      // 如果需要前进后退按钮
      nextButton: ".swiper-button-next",
      prevButton: ".swiper-button-prev",
 
      // 如果需要滚动条
      scrollbar: ".swiper-scrollbar",
});

样式

.swiper-container {
  height: 500px;
  width: 100%;
  .swiper-wrapper {
    .swiper-slide {
      width: 100%;
      height: 100%;
      background-color: #42b983;
      text-align: center;
      line-height: 500px;
    }
  }
}

完成这些swiper3的基本用法就全了

swiper5

这也是vue2目前用的最多的一个版本了,首先安装的时候我们需要执行这个命令同swiper一块安装的还有一个vue-awesome-swiper

npm install swiper vue-awesome-swiper --save

这里和swiper3的引入思维基本上是一致的

早main.js里面引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

引入之后我们就可以直接写dom

<swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>Slide 1swiper-slide>
      <swiper-slide>Slide 2swiper-slide>
      <swiper-slide>Slide 3swiper-slide>
 
      
      <div class="swiper-pagination" slot="pagination">div>
 
      
      <div class="swiper-button-prev" slot="button-prev">div>
      <div class="swiper-button-next" slot="button-next">div>
 
      
      <div class="swiper-scrollbar" slot="scrollbar">div>
 swiper>

然后data函数里面return一个

swiperOptions: {
        autoplay:true,
        //设置环路
        loop: true,
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 如果需要滚动条
        scrollbar: {
          el: ".swiper-scrollbar",
        },
}

然后计算函数computed需要写一个方法

swiper() {
      return this.$refs.mySwiper.$swiper;
}

样式和swiper3一样

完成这些swiper5的基本用法就ok了

swiper7

一般我们使用swiper7都是用vue3来写的,尽量不要用swiper6(踩得坑比较多)我们创建好项目后,用

npm i swiper
import { Navigation, Pagination, Scrollbar, A11y,Autoplay } from "swiper";
 
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
 
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";
import "swiper/modules/autoplay/autoplay.min.css";

这里的引入和官网上介绍的有点不一样可以根据自己的文件夹进行修改

然后在components将我们引入的Swiper, SwiperSlide写进来

 components:{
     Swiper,
     SwiperSlide
 }

setup里面写

setup() {
    //获取swiper对象
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
 
    //轮播图改变触发的事件
    const onSlideChange = () => {
      console.log("slide change");
    };
 
    return {
      onSwiper,
      onSlideChange,
 
      //抛出各种样式
      modules: [Navigation, Pagination, Scrollbar, A11y,Autoplay],
    };
 };

在dom上是这样写的

    <swiper
      :modules="modules"
      :slides-per-view="1"
      :space-between="50"
      navigation
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: true }"
      :autoplay="{Autoplay:true}"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper>

我们绑定的属性都是在setup中抛出的

slides-per-view="1" 是只显示一屏

navigation  左右按钮

scrollbar 是滚动条

autoplay 是让它自动轮播

pagination 分页器

最后写一点样式就ok了

.swiper-slide {
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  text-align: center;
  background-color: pink;
}

虽然不同版本的swiper有些不同,但总的思路是不变的,官网也会有一些笼统的写法

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

梁鹏翱
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部