Vue - 轮播组件的使用(vue-awesome-swiper)

轮播组件的使用(vue-awesome-swiper)

  • 一. vue-awesome-swiper轮播组件使用
  • 二. 使用轮播图可能会遇到的问题
  • 三. 一个轮播图实例

vue-awesome-swiper官网:https://www.npmjs.com/package/vue-awesome-swiper
Swiper官网:https://www.swiper.com.cn/api/index.html

一. vue-awesome-swiper轮播组件使用

  1. 安装 vue-awesome-swiper 依赖
    npm install swiper [email protected] --save

  2. main.js中 引入 vue-awesome-swiper

    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'
    Vue.use(VueAwesomeSwiper)
    
  3. 测试 vue-awesome-swiper 是否可以正常使用
    测试代码:

    <template>
      <div class="wrap">
        <swiper :options="swiperOptions">
          <swiper-slide>Slide 1swiper-slide>
          <swiper-slide>Slide 2swiper-slide>
          <swiper-slide>Slide 3swiper-slide>
          <swiper-slide>Slide 4swiper-slide>
          <swiper-slide>Slide 5swiper-slide>
          <div class="swiper-pagination" slot="pagination">div>
        swiper>
      div>
    template>
    <script>
    export default {
      data() {
        return {
          swiperOptions: {},
        };
      },
    };
    script>
    <style scoped>
    style>
    
  4. 若报错以下类似错误,请仔细查看本步骤;若无错误,页面正常显示,可跳过此步骤
    Vue - 轮播组件的使用(vue-awesome-swiper)_第1张图片
    解决方案:
    4.1 进入 package.json 中查看 swiper 安装的版本
    发现版本是6.1.2
    Vue - 轮播组件的使用(vue-awesome-swiper)_第2张图片
    4.2 如果安装6.0以上版本,需要引入另外一个 css
    import 'swiper/swiper-bundle.css'

二. 使用轮播图可能会遇到的问题

  1. 轮播图左右箭头点击不生效
    原因:
    vue-awesome-swiper 安装版本原因
    解决方案:
    重新安装3.1.3版本 vue-awesome-swiper
  2. 轮播图自动切换的时间间隔不生效
    原因:
    vue-awesome-swiper 安装版本原因
    解决方案:
    swiper-slide 添加属性 data-swiper-autoplay,属性值为时间(毫秒)
    Vue - 轮播组件的使用(vue-awesome-swiper)_第3张图片

三. 一个轮播图实例

<template>
  <div class="wrap">
    <swiper :options="swiperOption" ref="mySwiper">
      
      <swiper-slide v-for="item of 5" :key="item">
        {{ item }}
      swiper-slide>
      
      
      <div class="swiper-pagination" slot="pagination">div>
      
      <div
        class="swiper-button-prev swiper-button-whitehide hide"
        slot="button-prev"
      >div>
      
      <div
        class="swiper-button-next swiper-button-white hide"
        slot="button-next"
      >div>
      
      
    swiper>
    <div class="textBtn">
      <div
        class="itme"
        v-for="(item,index) of 5"
        :key="item"
        @click="toSwiperSlide(index)"
      >
        {{ item }}
      div>
    div>
  div>
template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      swiperOption: {
        //分页器设置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        //左右箭头点击
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 使用键盘的方向键控制slide切换
        keyboard: {
          enabled: true,
          onlyInViewport: false,
        },
        notNextTick: true,
        //循环
        loop: true,
        //设定初始化时slide的索引
        initialSlide: 0,
        //自动播放,等同下面autoplay设置
        autoplay: true,
        // 设置轮播切换效果
        effect: "slide",
        //轮播切换动速度
        speed: 800,
        //轮播滑动方向
        direction: "horizontal",
        //小手掌抓取滑动
        grabCursor: true,
        //滑动之后回调函数
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.activeIndex);//切换结束时,告诉我现在是第几个slide
          },
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  mounted() {
    //可以使用swiper这个对象去使用swiper官网中的那些方法
    //console.log('this is current swiper instance object', this.swiper);
    // this.swiper.slideTo(0, 0, false);

    //鼠标移出隐藏按钮,移入显示按钮
    this.swiper.el.onmouseover = () => {
      this.swiper.navigation.$nextEl.removeClass("hide");
      this.swiper.navigation.$prevEl.removeClass("hide");
    };
    this.swiper.el.onmouseout = () => {
      this.swiper.navigation.$nextEl.addClass("hide");
      this.swiper.navigation.$prevEl.addClass("hide");
    };
  },
  methods: {
    toSwiperSlide(evt) {
      //切换到第一个slide,速度为1秒
      this.swiper.slideTo(evt, 1000, false);
    },
  },
};
script>

<style scoped>
.wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.swiper-container {
  width: 100%;
  height: 500px;
  background-color: #80c7ff;
  position: relative;
}
.swiper-pagination {
  position: absolute;
  z-index: 9;
  bottom: 0;
  width: 100%;
}
.swiper-pagination >>> .swiper-pagination-bullet {
  margin: 0 5px;
}
.hide {
  opacity: 0;
}
.swiper-button-next,
.swiper-button-prev {
  transition: opacity 0.5s;
  width: 35px;
  background-color: #2196f3;
  border-radius: 50%;
  padding: 10px;
  box-sizing: border-box;
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
  --swiper-navigation-size: -1px; /* 设置按钮大小 */
}
.textBtn {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.itme {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2196f3;
  color: #fff;
  border-radius: 5px;
  margin: 0 5px;
  cursor: pointer;
}
style>

你可能感兴趣的:(#,Vue__插件,依赖的使用,vue.js)