vue.js使用vue-awesome-swiper实现轮播图

最新推荐文章于 2024-05-24 17:24:45 发布

了乌鹿

最新推荐文章于 2024-05-24 17:24:45 发布

阅读量477

点赞数 1

分类专栏： vue.js移动端项目开发文章标签： vue js

本文链接：https://blog.csdn.net/tianbushengyinuo/article/details/108244539

版权

vue.js移动端项目开发专栏收录该内容

12 篇文章 2 订阅

订阅专栏

先放效果图：参考swiper介绍

vue.js使用vue-awesome-swiper实现轮播图

1、首先第一步：安装vue-awesome-swiper

npm install  vue-awesome-swiper --save

2、引入vue-awesome-swiper
在main.js中引入：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)（后可跟默认参数）

3、使用
注：swiper所在组件不能与swiper重名，否则报错Maximum call stack size exceeded即堆栈溢出。
(1)、template部分

<swiper :options="swiperOption">
    <swiper-slide><img src=""></swiper-slide>
    <swiper-slide><img src=""></swiper-slide>
    <swiper-slide><img src=""></swiper-slide>
    <swiper-slide><img src=""></swiper-slide>
    <swiper-slide><img src=""></swiper-slide>

    <!--以下看需要添加-->
    <div class="swiper-scrollbar"></div> //滚动条
    <div class="swiper-button-next"></div> //下一个
    <div class="swiper-button-prev"></div> //上一个
    <div class="swiper-pagination" slot="pagination"></div> //标页码
</swiper>

(2)、script部分
以下有看不懂的可以去官网看api，链接官网

 data() {
    return {
      swiperOption: {
        //组件不会通过NextTick来实例化swiper，即第一时间获取到swiper对象
        notNextTick: true,
        //通过插槽slot使用分页器
        pagination: '.swiper-pagination',
        // prevButton: '.swiper-button-prev',
        // nextButton: '.swiper-button-next',
        
        //实现轮播图循环
        loop: true,
        //实现轮播图自动滚动
        autoplay:true,
        //设置滚动速度
        // speed:1000,
        //解决小圆点渲染失败问题
        pagination: {
          el: '.swiper-pagination',
          // 点击小圆点实现切换
          clickable: true,
          }，
        
        // zoom: true,
        // 手机端双击放大
        // grabCursor:true,
        // 手型
      },
      
    }
  },