如何在VUE中使用vue-awesome-swiper

一：首先进入项目目录中安装

install vue-awesome-swiper@2.6.7 --save

二.使用

全局挂载：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

组件挂载

// require styles
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
 components: {
 swiper,
 swiperSlide
 }
}

新建一个.vue文件，按照以下代码模式

<template>
 <div class="index">
 <Top navLeft="true" title="轮播图" navRight="false"></Top>
  <div style="padding-top: 1.3rem;padding-left:0.2rem">
   <swiper id="mySwiper" :options="swiperOption" ref="mySwiper" v-if="swiperList.length!=0">
   <swiper-slide class="swiper-item" v-for='(item,index) of swiperList' :key='item.id' >
     <img class='swiper-img' :src='item.imgUrl' alt="门票" @click="swiperClick(index,item.linkUrl)" />
   </swiper-slide>
   <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
 </div>
 </div>
</template>
<script>
import Top from '@/components/public/Top';
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
 name: 'Swiper',
 components: {Top,swiper,swiperSlide},
 data() {
  return {
  swiperList:[],
  swiperOption: {
   pagination: ".swiper-pagination",
   initialSlide: 0,//默认第几张
   loop:true, //循环
   autoplayDisableOnInteraction:false,//触摸后再次自动轮播
   autoplay:2000, //每张播放时长3秒，自动播放
   speed:1000,//滑动速度
  }
  }
 },
 created(){
 this.initEvent();
 console.log(this.$refs.mySwiper);
 this.swiperOption.autoplay = this.swiperList.length != 1 ? 2000 : false;//如果是一张图片不轮播

 },

 computed: {
  swiper() {
   return this.$refs.mySwiper.swiper//组件实例
  }
 },
 mounted(){ 

 },
 methods: {
 initEvent:function(){
  this.$http.get("http://localhost/swiper")
  .then(res=>{
   this.swiperList=res.data.swiperList;
  })
  .catch(error=>{
   console.log(error)
  })
 },
 swiperClick:function(index,url){
  console.log(index);
  this.$router.push(url)
 }
 }
}
</script>

<style scoped>
@import "../assets/public/css/bottom.css";
@import "../assets/css/index/my.css";
#mySwiper >>> .swiper-pagination-bullet {
 background: #000000;
}
#mySwiper >>> .swiper-pagination-bullet-active {
 background: #ff0000;
}
</style>

页面展示如下

三：在使用过程中遇到的问题

1.触摸后再次自动轮播问题，添加以下属性就可以再次轮播

autoplayDisableOnInteraction:false

2.样式穿透问题，修改圆点的样式问题

解决方案是给swiper容器添加上ID，然后再在后面添加>>>,这样就可以解决了

#mySwiper >>> .swiper-pagination-bullet {
 background: #000000;
}
#mySwiper >>> .swiper-pagination-bullet-active {
 background: #ff0000;
}

3.解决如果只有一张图片不轮播问题

以上就是如何在VUE中使用vue-awesome-swiper的详细内容，更多关于VUE中使用vue-awesome-swiper的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue轮播图插件vue-awesome-swiper的使用代码实例

    最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,个人感觉还是比较强大的,swiper官网中的API及配置均可使用(支持3.0),以下说下使用该插件的一些步骤: 第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesom

  • vue轮播图插件vue-awesome-swiper

    Vue-Awesome-Swiper 轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,SPA和SSR. 例子 例子 安装设置 安装Install vue-awesome-swiper npm install vue-awesome-swiper --save vue挂载 // import import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // or require var

  • 使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果

    旋转叠加 平移 前段时间做Hybrid App,UI设计湿要求某一个页面的展示要实现滑动轮播效果,选中的内容卡片居中显示,上一个内容卡片和下一个内容以小一倍的大小显示在选中的卡片后头,而且要高斯模糊等等..最骚的是滑动特效要是一个个旋转叠加.(摔! 当时用的是vue-cli-3 + ant-design-vue实现的页面,发现ant-design-vue里头有现成的Carousel组件可用,由于排期比较急,先暂时用这个实现了第一版,没有特效没有其他花里胡哨的展示.验收完第一版后,发现ant-de

  • vue引入新版 vue-awesome-swiper插件填坑问题

    vue引入新版 vue-awesome-swiper插件填坑问题

    本文介绍了关于新版 vue-awesome-swiper,分享给大家,具体如下: 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的vue-awesome-swiper不会自动播放? 为什么我的vue-awesome-swiper没有? 使用 引入(前面的步骤和往常一样) npm install vue-awesome-swiper --save 在 main,js 里引入(全局): import VueAwesomeSwiper from

  • vue-awesome-swiper滑块插件使用方法详解

    vue-awesome-swiper滑块插件使用方法详解

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 github地址: https://github.com/surmon-china/vue-awesome-swiper.git 1.进入项目目录,安装swiper npm install vue-awesome-swiper --save 2.引入资源 //vue滑块 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwi

  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图

    一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u

  • vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! vue-awesome-swiper就是其中一个前辈们产出的结晶.就看首尾两个单词,就知道他是vue和swiper的爱情之子了. vue-awesome-swiper官网是中文文档,妈妈再也不用担心我读api啦."基于 Swiper4.适用于 Vue 的轮播组件".在产品催着进度的紧张环境下,在四处搜寻解决方案的情况下,这句话简直发着光啊. 具体怎么用,官方文档写的很清楚,但我还是

  • Vue中通过Vue.extend动态创建实例的方法

    在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = "show"来控制它的显示隐藏.如下所示: <div> <button @click = "show = !show">弹出</button> <span v-if = "show">这是一条通过按钮控制显示隐藏的信息</span>

  • Vue中的.vue文件的使用方式

    目录 定义.vue文件 引用.vue文件 使用render函数 什么是.vue文件,它的作用是什么 需要安装vue-loader npm i vue-loader vue-template-complier -D 然后在配置文件中新增匹配规则 {test:/\.vue$/,use:'vue-loader'} 定义.vue文件 <template> <!--这里定义html模板--> </template> <script> //这里定义js //在这里导入文

  • 聊聊Vue中provide/inject的应用详解

    众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数据管理的 Vuex. 在这么多的组件通信方式中,provide/inject 显得十分阿卡林(毫无存在感).但是,其实 provide/inject 也有它们的用武之地.今天,我们就来聊聊 Vue 中 provide/inject 的应用. 何为 provide/inject provide/inj

  • vue中methods、mounted等的使用方法解析

    vue中methods、mounted等的使用方法解析

    目录 methods.mounted的使用方法 vue生命周期(methods.mounted) 1.什么是生命周期 2.钩子函数 3.Vue生命周期之初始化阶段 methods.mounted的使用方法 created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行. watch:去监听一个值的变化,然后执行相对应的函数. computed:computed是计算属性,也就是依赖其它的属性计算

  • vue中引入路径@的用法及说明

    vue中引入路径@的用法及说明

    目录 引入路径@的用法及说明 Vue文件中引用路径的介绍 Vue中使用 vue项目路径使用@的原因 @是webpack设置的路径别名 使用场景 引入路径@的用法及说明 Vue文件中引用路径的介绍 1.路径 ./ ./当前文件同级目录 2.路径 …/ …/当前文件上一级目录 3.@符号 @ 的作用是在你引入模块时,可以使用 @ 代替 /src 目录,避免易错的相对路径. Vue中使用 1. vue.config.js配置文件中使用   chainWebpack(config) {     conf

  • Vue中router-link常用属性使用案例讲解

    目录 Vue中router-link常用属性使用 router-link属性 vue中的router-link属性详解 router-link标签 router-link属性值详解 Vue中router-link常用属性使用 在vue1.0版本的超链接标签还是原来的a标签,链接地址由v-link属性控制而vue2.0版本里超链接标签由a标签被替换成了router-link标签,但最终在页面还是会被渲染成a标签的至于为什么要把a换成router-link原因还是有的,比如我们之前一直惯用的nav导

  • 如何在VUE中使用vue-awesome-swiper

    如何在VUE中使用vue-awesome-swiper

    一:首先进入项目目录中安装 install vue-awesome-swiper@2.6.7 --save 二.使用 全局挂载: import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)

  • 如何在vue中使用ts的示例代码

    如何在vue中使用ts的示例代码

    本文介绍了如何在vue中使用ts的示例代码,分享给大家,具体如下: 注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可

  • 解决vue中使用swiper插件问题及swiper在vue中的用法

    Swiper简介 Swiper常用于移动端网站的内容触摸滑动. Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题 这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template> <div clas

  • vue中引用swiper轮播插件的教程详解

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件:  npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div

随机推荐