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 相关文章推荐
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 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/04/20 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
用js实现in_array的方法
2013/11/05 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
js实现圆盘记速表
2015/08/03 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
python spyder中读取txt为图片的方法
2018/04/27 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
法制宣传标语
2014/06/23 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
招商引资工作汇报
2014/10/28 职场文书
三孔导游词
2015/02/05 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
企业百日安全活动总结
2015/05/07 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书