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 相关文章推荐
Javascript var变量隐式声明方法
Oct 19 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 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 $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
详解Python中time()方法的使用的教程
2015/05/22 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python 批量修改/替换数据的实例
2018/07/25 Python
破解安装Pycharm的方法
2018/10/19 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
制定岗位职责的原则
2013/11/08 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫
Windows server 2012搭建FTP服务器
2022/04/29 Servers