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


Posted in Vue.js onJanuary 04, 2021

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

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>

页面展示如下

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

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

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的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue router安装及使用方法解析
Dec 02 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 #Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 #Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 #Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 #Vue.js
vue中使用echarts的示例
Jan 03 #Vue.js
vue 动态生成拓扑图的示例
Jan 03 #Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 #Vue.js
You might like
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
如何获得PHP相关资料
2006/10/09 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
一份python入门应该看的学习资料
2018/04/11 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
学校安全教育制度
2014/01/31 职场文书
大学生校园创业计划书
2014/02/08 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
工程技术员岗位职责
2015/04/11 职场文书
律师函格式范本
2015/05/27 职场文书
python自动化八大定位元素讲解
2021/07/09 Python
防止web项目中的SQL注入
2021/12/06 MySQL
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server