vue引入swiper插件的使用实例


Posted in Javascript onJuly 19, 2017

本文介绍了vue引入swiper插件,分享给大家,希望对大家有帮助

步骤一:安装vue,  

$ npm install vue

步骤二:创建vue项目  

# 全局安装 vue-cli 
$ npm install -g vue-cli 
$ cd my-project 
$ npm install 
$ npm run dev

上面这些就是安装好vue项目,最主要的就是下面的步骤

步骤三:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下。 

步骤四: 

安装runtime: 

终端命令:npm install babel-runtime 

步骤五: 

修改.eslintrc.js文件如下: 

// http://eslint.org/docs/user-guide/configuring 
 
module.exports = { 
 root: true, 
 parser: 'babel-eslint', 
 parserOptions: { 
  sourceType: 'module' 
 }, 
 env: { 
  browser: true, 
 }, 
 // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 
 extends: 'standard', 
 // required to lint *.vue files 
 plugins: [ 
  'html' 
 ], 
 // add your custom rules here 
 'rules': { 
  // allow paren-less arrow functions 
  'arrow-parens': 0, 
  // allow async-await 
  'generator-star-spacing': 0, 
  // allow debugger during development 
  'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 
 }, 
 'globals': { 
  "Swiper": true 
 }  //这个地方是新加入的  全局注入 
}

步骤六:在自己的vue文件中添加轮播图代码 

<div v-on:mouseenter="stopPlay()" v-on:mouseleave="play()" class="swiper-container gallery-top swiper-container-horizontal"> 
  <div class="swiper-wrapper"> 
    <div v-for="value in lbt" class="swiper-slide swiper-slide-next" style="width: 100%; margin-right: 10px;" v-bind:style="{backgroundImage: 'url(' + value.imgs + ')'}"></div> 
  </div> 
  <div class="swiper-button-next swiper-button-white"></div> 
  <div class="swiper-button-prev swiper-button-white swiper-button-disabled"></div> 
</div> 
<div class="swiper-container gallery-thumbs swiper-container-horizontal"> 
  <div class="swiper-wrapper"> 
    <div v-for="value in lbt" class="swiper-slide swiper-slide-next" style="margin-right: 10px;" v-bind:style="{backgroundImage: 'url(' + value.imgs + ')'}"></div> 
  </div> 
</div>
import Swiper from '../../static/swiper-3.4.2.min.js' 
let galleryTop 
let galleryThumbs 
export default { 
 name: 'main', 
 data () { 
  return { 
   lbt: [ 
    { 
     'imgs': '../static/product/lbt1.jpg' 
    }, { 
     'imgs': '../static/product/lbt2.jpg' 
    }, { 
     'imgs': '../static/product/lbt3.jpg' 
    } 
   ] 
  } 
 }, 
 mounted () { 
  this.lunbo() 
 }, 
 methods: { 
  lunbo () { 
   galleryTop = new Swiper('.gallery-top', { 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    spaceBetween: 10, 
    grabCursor: true, 
    initialSlide: 1, 
    autoplayDisableOnInteraction: false 
   }) 
   galleryThumbs = new Swiper('.gallery-thumbs', { 
    spaceBetween: 10, 
    autoplay: 4000, 
    initialSlide: 1, 
    centeredSlides: true, 
    slidesPerView: 'auto', 
    touchRatio: 0.2, 
    slideToClickedSlide: true, 
    autoplayDisableOnInteraction: false, 
    grabCursor: true 
   }) 
   galleryTop.params.control = galleryThumbs 
   galleryThumbs.params.control = galleryTop 
  }, 
  stopPlay () { 
   galleryTop.stopAutoplay() 
   galleryThumbs.stopAutoplay() 
  }, 
  play () { 
   galleryTop.startAutoplay() 
   galleryThumbs.startAutoplay() 
  } 
 } 
}
@import url("../assets/swiper-3.4.2.min.css"); 
.gallery-top{  
  height:32rem;  
  width:100%; 
}  
.gallery-thumbs{  
  height:20%;  
  box-sizing:border-box;  
  padding:10px 0;  
  background: rgba(0, 0, 0, 0.4); 
  cursor: pointer; 
}  
.gallery-thumbs .swiper-slide{  
  width:30%;  
  height:6rem;  
  opacity:0.3;  
}  
.gallery-thumbs .swiper-slide-active{  
  opacity:1;  
}  
.swiper-slide{ 
 background-size: 100% 160%; 
 -webkit-background-size: 100% 160%; 
}

这里还有一个很重要的问题,在模板里面设置背景图,写法应该是

v-bind:style="{backgroundImage: 'url(' + value.imgs + ')'}"

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

Javascript 相关文章推荐
Javascript 读书笔记索引贴
Jan 11 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
ES6关于Promise的用法详解
May 07 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 #Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 #Javascript
JS设置随机出现2个数字的实例代码
Jul 19 #Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 #jQuery
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 #Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 #Javascript
深入理解vue2.0路由如何配置问题
Jul 18 #Javascript
You might like
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
Python实现从百度API获取天气的方法
2015/03/11 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
浅析python中while循环和for循环
2019/11/19 Python
python如何基于redis实现ip代理池
2020/01/17 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
中专生自我鉴定范文
2013/12/19 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
2014年技术员工作总结
2014/11/18 职场文书
文明班级申报材料
2014/12/24 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
Django与数据库交互的实现
2021/06/03 Python
分析Python list操作为什么会错误
2021/11/17 Python