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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 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 面向对象实现代码
2009/11/11 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
pycharm 使用心得(三)Hello world!
2014/06/05 Python
django实现用户登陆功能详解
2017/12/11 Python
Python中dict和set的用法讲解
2019/03/28 Python
python中常用的数据结构介绍
2021/01/12 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
Farnell德国:电子元器件供应商
2018/07/10 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
金属材料工程个人求职的自我评价
2013/12/04 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
市场营销专业自荐书
2014/06/10 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
护士先进个人总结
2015/02/13 职场文书
降价通知函
2015/04/23 职场文书
投诉信范文
2015/07/02 职场文书
新店开张宣传语
2015/07/13 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript