Vue框架里使用Swiper的方法示例


Posted in Javascript onSeptember 20, 2018

下载swiper

首先使用npm 或者cnpm下载swiper

cnpm install swiper

引入swiper

import Swiper from ‘swiper'; 
import ‘swiper/dist/css/swiper.min.css';

使用swiper

<div class="swiper-container">
  <div class="swiper-wrapper">
   <div class="swiper-slide">
    <img src="../../static/images/ad1.jpg" alt="">
   </div>
   <div class="swiper-slide">
    <img src="../../static/images/ad2.jpg" alt="">
   </div>
   <div class="swiper-slide">
    <img src="../../static/images/ad3.jpg" alt="">
   </div>
  </div>
 </div>

mounted里面调用

mounted(){
    var mySwiper = new Swiper('.swiper-container', {
     autoplay:true,
     loop:true
    })
   },

注意

如果想要从后台请求图片放上去 new Swiper要写在网络请求成功的函数里面,否则不会出来数据。

slider组件的内容如下:

<template>
 <swiper :options="swiperOption" ref="mySwiper">
  <!-- slides -->
  <swiper-slide v-for="(picitem,index) in items" :key="index">
   <img :src="picitem.src" alt="">
  </swiper-slide>
 </swiper>
</template>
<script type="text/ecmascript-6">
 import {swiper, swiperSlider} from 'vue-awesome-swiper'

 export default {
  data() {
   return {
    swiperOption: {
     notNextTick: true,
     loop: true,
     autoplay: true,
     speed: 1000,
     direction: 'horizontal',
     grabCursor: true,
     setWrapperSize: true,
     autoHeight: true,
     pagination: '.swiper-pagination',
     paginationClickable: true,
     mousewheelControl: true,
     observeParents: true,
     debugger: true
    },
    items: [
     {src: 'http://localhost/static/images/1.jpg'},
     {src: 'http://localhost/static/images/2.jpg'},
     {src: 'http://localhost/static/images/3.jpg'},
     {src: 'http://localhost/static/images/4.jpg'},
     {src: 'http://localhost/static/images/5.jpg'}
    ],
   }
  },
  components: {
   swiper,
   swiperSlider
  }
 }
</script>
<style lang="stylus" rel="sheetstylus">

</style>

解释一下:autoplay:true这样可以解决不自动轮播问题。如果想设置滚动的时间,用speed设置相应时间即可。direction可以设置轮播的方向。具体的参数可参考swiper的官网地址:http://www.swiper.com.cn/api/Effects/2015/0308/193.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
JS request函数 用来获取url参数
May 17 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 #Javascript
Vue常见面试题整理【值得收藏】
Sep 20 #Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 #Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 #Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 #Javascript
浅谈React Event实现原理
Sep 20 #Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 #Javascript
You might like
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
python中提高pip install速度
2020/02/14 Python
Python如何读取、写入CSV数据
2020/07/28 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
初级Java程序员面试题
2016/03/03 面试题
社区中秋节活动方案
2014/01/29 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
环保专项行动方案
2014/05/12 职场文书
入党推优材料
2014/06/02 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
python开发实时可视化仪表盘的示例
2021/05/07 Python
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS