vue项目中导入swiper插件的方法


Posted in Javascript onJanuary 30, 2018

版本选择

swiper是个常用的插件,现在已经迭代到了第四代:swiper4。

常用的版本是swiper3和swiper4,我选择的是swiper3。

安装

安装swiper3的最新版本3.4.2:

npm i swiper@3.4.2 -S

这里一个小知识,查看node包的所有版本号的方法:

npm view 包名 versions

组件编写

swiper官方的使用方法分为4个流程:

  1. 加载插件
  2. HTML内容
  3. 给Swiper定义一个大小
  4. 初始化Swiper

我也按照这个流程编写组件:

加载插件

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

HTML内容

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
  </div>
</template>

给Swiper定义一个大小

.swiper-container {
  width: 600px;
  height: 300px;
}

初始化Swiper

因为dom渲染完成才能初始化Swiper,所以必须将初始化放入vue的生命周期钩子函数mounted中:

mounted(): {
  /* eslint-disable no-new */
  new Swiper('.swiper-container', {})
}

以上代码中的/* eslint-disable no-new */是启用的eslint代码检测的项目可以使用,如果没有使用eslint可用使用一下代码:

mounted(): {
  var mySwiper = new Swiper('.swiper-container', {})
}

完成

将以上的代码合并起来:

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
  </div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
  mounted(): {
    var mySwiper = new Swiper('.swiper-container', {})
  }
}
</script>

<style>
.swiper-container {
  width: 600px;
  height: 300px;
}
</style>

运行,你看可以实现轮播图的效果了。但是到此为止只实现了轮播的效果,还没有对数据的渲染。

对数据的渲染

在实际项目中swiper插件常用于实现banner图的效果(新浪手机版):

vue项目中导入swiper插件的方法

数据的获取

我用在vue项目中常用ajax插件axios来示例:

axios
 .get('/user?ID=12345')
 .then(function (response) {
  this.imgList = response;
 })
 .catch(function (error) {
  console.log(error);
 });

将获取数据的数据结构规定为:

[
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif"
]

列表渲染

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in imgList" :style="{backgroundImage: 'url(' + item + ')'}"></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
  </div>
</template>

<style>
.swiper-slide {
  width: 100%;
  height: 400px;
}
<style>

到此为止已经将数据渲染完成了,但是查看实际效果,似乎banner无法实现轮播图的效果啊。这里只是将图片渲染了出来,但是渲染出轮播图并没有被初始化。因为初始化已经在生命周期mounted时完成了。

初始化

所以在获取数据且DOM更新后,需要重新初始化swiper。

axios
 .get('/user?ID=12345')
 .then(function (response) {
  // 获取数据更新
  this.imgList = response;
  // DOM还没有更新
  this.$nextTick(() => {
    // DOM更新了
    // swiper重新初始化
    /* eslint-disable no-new */
    new Swiper('.swiper-container', {})
  })
 })
 .catch(function (error) {
  console.log(error);
 });

到此,轮播图的效果实现了。

总结

swiper是我们平时很常用的插件,但将swiper导入vue项目中遇到的问题不少。最主要的问题是要搞懂vue的生命周期,这样才能有效地使用各种js插件。

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

Javascript 相关文章推荐
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
详解小程序云开发数据库
May 20 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 #Javascript
简单理解Vue中的nextTick方法
Jan 30 #Javascript
Vue组件中slot的用法
Jan 30 #Javascript
vue初尝试--项目结构(推荐)
Jan 30 #Javascript
JS实现的邮箱提示补全效果示例
Jan 30 #Javascript
JS实现的抛物线运动效果示例
Jan 30 #Javascript
express如何使用session与cookie的方法
Jan 30 #Javascript
You might like
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
新闻内页-JS分页
2006/06/07 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
英语翻译系毕业生求职信
2013/09/29 职场文书
百度吧主申请感言
2014/01/12 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
给老婆的保证书范文
2014/04/28 职场文书
团代会宣传工作方案
2014/05/08 职场文书
企业文化口号
2014/06/12 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书