2019-07-16 杂记

189 阅读2分钟

在Vue中使用swiper 一:安装

npm install vue-awesome-swiper --save

二:引入 在全局main.js内:

import vueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(vueAwesomeSwiper)

在使用的组件页面内:

import "swiper/dist/css/swiper.css";

import { swiper, swiperSlide } from "vue-awesome-swiper";

三:案例:

<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <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>
</template>

其中,swiper的属性 @someSwiperEvent="callback”

@someSwiperEvent为父组件定义的事件,如果有需要可在此处(子组件)赋予回调操作,没有操作需要时删掉即可。

之前引入时:

import { swiper, swiperSlide } from "vue-awesome-swiper"; 

引入了 swiperSlide(在使用时驼峰命名会变成使用横线分割,因为HTML标签不区分大小写)所以可以使用 <swiper-slide>标签

swiper-slide 内为轮播的内容,下方各个div为可视操作按钮,例如左右箭头、底部小圆点以及展示当前第几张的滚动条/进度条等

在组件的 data 内设置 swiperOption

data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          speed: 200,
          disableOnInteraction: false, //用户操作swiper后是否禁止autoplay,默认为true:操作后停止。操作包括触碰、拖动、点击分页器pagination等
          stopOnLastSlide: false //为true时当切换到最后一个slide时停止自动切换
        },
        on: {
          slideChangeTransitionStart: function() {  //回调函数,swiper从当前slide开始过渡到另一个slide时执行。
            //do something
          }
        }
      }
    };
  },

事件类操作在

on: {
    
}

内编写。 组件的components引入:

  components: {
    swiper,
    swiperSlide
  },

在computed内设置:

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

操作时对data内的 swiperOption 修改即可

其他API信息:www.swiper.com.cn/api/index.h…

Vue.$set 为已存在的对象新增属性

www.jianshu.com/p/71b1807b1…

Vue 刷新当前页面

segmentfault.com/a/119000001…

vue.$emit父子组件通信 blog.csdn.net/sllailcp/ar…

以及bus总线