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的对话框详解与参数
Mar 08 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
javascript显示选择目录对话框的代码
Nov 10 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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二分法查找数组是否包含某一元素
2013/05/23 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Python 文件处理注意事项总结
2017/04/10 Python
Python正则表达式常用函数总结
2017/06/24 Python
python实现简单神经网络算法
2018/03/10 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
python str字符串转uuid实例
2020/03/03 Python
Django中的session用法详解
2020/03/09 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
Python如何读取、写入JSON数据
2020/07/28 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
汉森批发:Hansen Wholesale
2018/05/24 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
军训自我鉴定
2013/12/14 职场文书
技校个人求职信范文
2014/01/25 职场文书
升学宴答谢词
2015/01/05 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
学校运动会简讯
2015/07/20 职场文书
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers