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 相关文章推荐
Javascript中的几种URL编码方法比较
Jan 23 Javascript
详解iframe与frame的区别
Jan 13 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
原生js实现随机点名
Jul 05 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 Stream_*系列函数
2010/08/01 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php递归实现无限分类的方法
2015/07/28 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
javascript 禁止复制网页
2009/06/11 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
JavaScript类的写法
2016/09/17 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
python内置模块collections知识点总结
2019/12/19 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
博士研究生自我鉴定范文
2013/12/04 职场文书
治超工作实施方案
2014/05/04 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
护士医德医风心得体会
2016/01/25 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis