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 相关文章推荐
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
微信小程序版本自动更新的方法
Jun 14 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数据流应用的简单例子
2012/06/01 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
django ajax发送post请求的两种方法
2020/01/05 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
英语专业毕业个人求职自荐信
2013/09/21 职场文书
后勤园长自我鉴定
2013/10/17 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python