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 相关文章推荐
jQuery动态地获取系统时间实现代码
May 24 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
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
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
Bootstrap精简教程
2015/11/27 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python实现简单socket通信的方法
2016/04/19 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
numpy.array 操作使用简单总结
2019/11/08 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
饭店工作计划书
2014/01/10 职场文书
领班岗位职责范文
2014/02/06 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
导游词之桂林山水
2019/09/20 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python