1. 下载官方的js和css文件分别放在assets下的js和css文件夹，然后在index.html中引入

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

  ...

  <link href="assets/css/swiper-4.1.6.min.css" rel="stylesheet">

  ...

</head>

<body>

  ...

  <script src="assets\js\swiper-4.1.6.min.js"></script>

</body>

</html>

2. home.html

<ion-header>

  <ion-navbar>

    <ion-title>

      Ionic Blank

    </ion-title>

  </ion-navbar>

</ion-header>

<ion-content padding>

  <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>

</ion-content>

3. home.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

declare let Swiper: any;

@Component({

  selector: 'page-home',

  templateUrl: 'home.html'

})

export class HomePage {

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {

    var mySwiper = new Swiper('.swiper-container', {

      direction: 'vertical',

      loop: true

    });

  }

}

4. home.scss

page-home {

  .swiper-container {

    width: 600px;

    height: 300px;

  }

}

哦了~

在ionic2中集成swiper插件的更多相关文章

  1. Ionic2中集成腾讯Bugly之自定义插件

    Ionic2混合开发,入坑系列:Ionic2中集成腾讯Bugly之自定义插件 1.编写Bugly.js代码 var exec = require('cordova/exec'); module.exp ...

  2. Ionic2中集成第三方控件Sweetalert

    Ionic2混合开发,入坑系列:Ionic2中集成第三方控件Sweetalert 注:Sweetalert2已经可以直接从npm中下载安装 npm install --save sweetalert2 ...

  3. Jenkins中集成jmeter-maven插件

    转自:http://my.oschina.net/u/1377774/blog/168969 目录[-] 第一步.先在maven工程中单独使用jmeter-maven插件 0.环境 1.在POM.xm ...

  4. Ionic2中使用第三方插件极光推送

    不同于Ionic1中插件的调用,Ionic2提供了Ionic Native.Ionic Native封装了一些常见的插件(如:Camera.Barcode Scanner等),这些插件的使用方式在官方 ...

  5. vue中引入swiper插件

    这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'v ...

  6. 实战：vue项目中导入swiper插件

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...

  7. IDEA中集成JRebel插件

    下载下面2个插件 jr-ide-intellij-6.4.3_13-16.zip --- 官网的jar(地址:https://plugins.jetbrains.com/plugin/4441-jre ...

  8. 在rubymine中集成heroku插件

    先安装heroku,参见http://www.cnblogs.com/jecyhw/p/4906990.html Heroku安装之后,就自动安装上git,目录为C:\Program Files (x ...

  9. Eclipse中集成Perforce插件

    perforce插件是由perforce官方提供的,安装时需要依赖DLTK,如下: 第一步:打开你的Eclipse,然后 Help -> Install New Software ... -&g ...

随机推荐

  1. exiting pxe rom 无法启动

    背景 我这是给人装了多少次机器了,上千次不敢说,几百次是有了.有个奇怪现象,为什么每次总有新的问题呢,极少能一次成功的.除了让我涨了见识,没想到其他的用处.程序员修电脑,搞笑吧,还有找我修洗衣机的,说 ...

  2. iperf 2.05版本升级到2.0.9

    将openwrt  trunk 分支上iperf 2.0.9移植到 bb版本上时,编译遇到如下问题: make[6]: Entering directory '/home/hbg/bb/build_d ...

  3. $Django 路飞之课程下的分类,用户登陆成功前端存cookie,

    一 课程分类显示 宗旨:总的再次过滤 二 Cookie # export default new Vuex.Store({ state: { name:'', token:'', }, mutatio ...

  4. Zabbix3.0.4监控Windows的CPU使用百分比并在CPU使用率超过90%触发报警

    Zabbix3.0.4监控Windows的CPU使用百分比 Zabbix 自带的模块没有 CPU 使用率(百分比)这个监控项,我们可以通过添加计数器的方式实现 CPU 百分比的监控. 1.在Zabbi ...

  5. Golang 优化之路-空结构[转]

    写在前面 开发 hashset 常用的套路: map[int]int8 map[int]bool 我们一般只用 map 的键来保存数据,值是没有用的.所以来缓存集合数据会造成内存浪费. 空对象 空对象 ...

  6. Sql语句之并(UNION)、交(INTERSECT)、差(minus)、除去(EXCEPT)

    UNION 查询选修了180101号或180102号课程或二者都选修了的学生学号.课程号和成绩. (SELECT  学号, 课程号, 成绩 FROM   学习 WHERE   课程号='180101' ...

  7. dubbo常用网址

    https://dubbo.gitbooks.io/dubbo-user-book/content/references/protocol/dubbo.html http://dubbo.apache ...

  8. Java的MVC模式简介

    Java的MVC模式简介 MVC(Model View Control)模型-视图-控制器 首先我们需要知道MVC模式并不是javaweb项目中独有的,MVC是一种软件工程中的一种软件架构模式,把软件 ...

  9. Oracle从入门到精通(详细) 明日科技

  10. Confluence 6 外部参考

    一个外部参考的意思是任何站点链接到你 Confluence 的实例.任何时候当 Confluence 的用户单击这个外部链接的时候,Confluence 可以记录这次单击为参考. 在默认的情况下,外部 ...