文档章节

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

o
 osc_fmg49rzg
发布于 2019/03/20 10:51
字数 978
阅读 49
收藏 0

精选30+云产品,助力企业轻松上云!>>>

版本选择

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

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

安装

安装swiper3的最新版本3.4.2:

?
1
npm i swiper@3.4.2 -S

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

?
1
npm view 包名 versions

组件编写

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

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

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

加载插件

?
1
2
import Swiper from 'swiper' ;
import 'swiper/dist/css/swiper.min.css' ;

HTML内容

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< 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定义一个大小

?
1
2
3
4
.swiper-container {
   width : 600px ;
   height : 300px ;
}

初始化Swiper

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

?
1
2
3
4
mounted(): {
   /* eslint-disable no-new */
   new Swiper( '.swiper-container' , {})
}

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

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

完成

将以上的代码合并起来:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
< 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项目中常用ajax插件axios来示例:

?
1
2
3
4
5
6
7
8
axios
  .get( '/user?ID=12345' )
  .then( function (response) {
   this .imgList = response;
  })
  . catch ( function (error) {
   console.log(error);
  });

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

列表渲染

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< 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。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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插件。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
vue-bluJavascript - Vue - 插件(swiper、vue-preview)

swiper swiper是一个支持滑动效果的js插件,它也支持在vue中使用,主要用于移动端的触摸滑动操作。Swiper中文网。 安装和导入插件 npm i vue-awesome-swiper - S //在main.js中导入swiper im...

osc_nubdt7rk
2019/05/28
12
0
vue项目进行nuxt改造

背景 原项目是使用vue-cli创建的vue项目。尝试引入ssr。直接上nuxt框架进行改造,本文做了一些改造记录 记录 1、vue-amap插件,直接在页面组件里 use的,未通过 plugins 配置,可行 2、mint-...

osc_ugxmmsvy
2019/06/24
2
0
使用vue-awesome-swiper实现幻灯片组件开发

vue的swiper组件 https://www.npmjs.com/package/vue-awesome-swiper 1、安装 swiper 和 vue-awesome-swiper 插件 cnpm install swiper vue-awesome-swiper --save (截图里只安装了vue-awe......

osc_ie20bwji
04/06
34
0
使用vue-awesome-swiper实现幻灯片组件开发

vue的swiper组件 https://www.npmjs.com/package/vue-awesome-swiper 1、安装 swiper 和 vue-awesome-swiper 插件 cnpm install swiper vue-awesome-swiper --save (截图里只安装了vue-awe......

陈莺莺呀
04/05
0
0
vue-awesome-swiper - 基于vue实现h5滑动翻页效果

说到h5的翻页,很定第一时间想到的是swiper。但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着。 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(...

郭菊锋
2018/07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

会议通知 | 2020中国计算与认知神经科学会议

关于大会关于 计算神经科学以神经生物实验为基础,以建立数学模型,开展计算模拟和分析作为基本手段,来刻画和描述大脑的神经活动,探究神经系统各种复杂活动和认知功能包括注意、学习、记忆...

脑机接口社区
06/02
17
0
大神分享快3怎么算下期和值

大神分享快3怎么算下期和值{叩67790572}使用的标签:constructor-arg标签出现的位置:bean标签的内部标签中的属性type:用于指定要注入的数据的数据类型,该数据类型也是构造函数中某个...

yiren081
21分钟前
21
0
Matlab系列之运算符和标点符号的功能介绍

本来月初就打算接着写的,但是电脑不小心进水,主板什么的都废了,周末才找时间拿去修好,心塞。 就不多讲太多废话了,开始分享今天的内容,对MATLAB的运算符做个介绍,然后再对标点符号进行...

狂人V
07/06
3
0
Java源码系列(1):Comparable和Comparator的区别

在讲Comparable和Comparator区别之前,先补充一个知识点。 先看代码: Person类 1public class Person<T> { 2  private T id; 3 4  public T getId() { 5    return i...

学习Java的小姐姐
2018/09/19
19
0
ThreadPoolTaskScheduler手写调度中心

先贴一个自己写的demo把,原理其实就是这样的。 CronTrigger这个类可以将cron表达式转换成Date,可以查看schedule源码学到不少东西,下面代码就是转换成下一执行时间。 public Date nextEx...

朝如青丝暮成雪
42分钟前
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部