vue swiper用法

标签：设计   length   new   sel   按钮   mys   eth   lin   list   

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 (双向控制)

vue swiper用法

标签：设计   length   new   sel   按钮   mys   eth   lin   list   

原文地址：https://www.cnblogs.com/zhaoxinran997/p/12380586.html