vue swiper用法

Posted 2020-11-28 zhaoxinran997

Swiper

https://www.swiper.com.cn/

• Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为ios而设计的，同时，在android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。

下载方法

1. cdn地址

   <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">  
   <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">    
   <script src="https://unpkg.com/swiper/js/swiper.js"> </script>  
   <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>

2. 命令行

   npm install swiper

静态使用方法

1.基本结构

 <div class="swiper-container">  <-- 最外层 -->
        <div class="swiper-wrapper">    <-- 包裹层 -->
            <div class="swiper-slide">Slide 1</div>   <-- 中间轮播 -->
            <div class="swiper-slide">Slide 2</div>
        </div>
 </div>

1. js代码

  var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,   //一页几张
        paginationClickable: true,  //点击跳转
        spaceBetween: 30,   // 外边距
        loop: true    //轮播
    });

vue中使用方法

  <div id="box"> 
        <div class="swiper-container banner">
            <div class="swiper-wrapper">
              <div v-for="(data,index) in datalist" :key="index" class="swiper-slide">
                {{data}}
              </div>
            </div>
            <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>

          <!-- 分页器 -->
          <div class="swiper-pagination"></div>
        </div>
    </div>

  var vm = new Vue({
         el:"#box",
         data:{
          datalist:[],
         },
         mounted() {
           //ajax,
           setTimeout(()=>{
            this.datalist = ["111111","2222222","333333"]
            // 状态赋值完, 异步上树(更新树)
            var oslide = document.querySelectorAll(".swiper-slide")
            this.myswiper = new Swiper(".banner",{
                loop:true,
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                },
                pagination: {
                  el: '.swiper-pagination',
                },
                autoplay: {
                  delay: 2500,
                  disableOnInteraction: false,
                }
              })

           },2000)
         },
         updated() {
            //让swiper自动更新一次
            this.myswiper.update(true)
         },
       })

vue swiper 组件

    <div id="box">
      <swiper :key="datalist.length" :perview="3">
        <div v-for="data in datalist" :key="data.filmId" 
        class="swiper-slide">
          <img :src="data.poster"/>
        </div>
      </swiper>
    </div>

    Vue.component("swiper",{
          template:`
          <div class="swiper-container banner">
            <div class="swiper-wrapper">
              <slot></slot>
            </div>
          </div>`,
          //属性检查
          props:{
            perview:Number
          },

          mounted() {
            new Swiper(".banner",{
                loop:true,
                autoplay: {
                  delay: 2500,
                  disableOnInteraction: false,
                },
                slidesPerView: this.perview, //一页显示几张
                spaceBetween: 30 //每张图片间距30px
                // direction:"vertical"
              })
          },
          destroyed() {
            console.log("destroyed")
          },
        })

一个项目中多个swiper的用法

? 1. 封装swiper组件：swiper.vue

<template>
  <div class="swiper-container" :class="addClass">
     <-- 添加类名 区分 -->
    <div class="swiper-wrapper">
        <slot></slot>
        <-- 留插槽 获取数据 添加数据 -->
    </div>
  </div>
</template>
<script>
    
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
export default {
  props:["addData","addClass"],
    //传值
  mounted(){
    new Swiper("."+(this.addClass?this.addClass:'swiper-container'),
    this.addData)
  }
}
</script>

1. 当第一个页面有一个大轮播图，最基础的一页一张

  <swiper :key="looplist.length">
      <div class="swiper-slide" v-for="data in looplist" :key="data.bannerId">
        <img :src="data.imgUrl"/>
      </div>
    </swiper>

1. 当另一个页面还有一个轮播，我们需要引用swiper组件，这次是一页三张，需要传值

 <swiper :addData="{
      slidesPerView: 3,  //一页三张
      spaceBetween: 30,  //边距
      freeMode: true
    }" addClass="actor">
      <div class="swiper-slide" v-for="(data,index) in filminfo.actors"
      :key="index">
        <img :src="data.avatarAddress"/>
      </div>
    </swiper>

1. 另一个页面还有一个四张图的轮播，这回就好做了，与上面轮播三张的一样，只是属性值不一样

 <swiper :addData="{
      slidesPerView: 4,  //一页4张
      spaceBetween: 30,  //边距
      freeMode: true
    }" addClass="actor">
      <div class="swiper-slide" v-for="(data,index) in filminfo.actors"
      :key="index">
        <img :src="data.avatarAddress"/>
      </div>
    </swiper>

API文档

• 使用swiper时，api非常方便。直接查文档，添加到实例里就可以了。

Free Mode （free模式/抵抗反弹）
Loop (环路)
loop:falseloopAdditionalSlides:0loopedSlides:1loopFillGroupWithBlank:false
Progress（进度）
Clicks (点击)
Touches(触发条件)
Swiping / No swiping(禁止切换)
Observer （监视器）
Namespace （命名空间）
Events （事件）
Properties （Swiper属性）
Methods （Swiper方法）

Autoplay (自动切换)
Effects (切换效果)
Pagination（分页器）
Navigation Buttons（前进后退按钮）
Scollbar（滚动条）
Keyboard（键盘）
Mousewheel (鼠标)
Lazy Loading(延迟加载)
Zoom (调焦)
Controller (双向控制)