ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法。

1.全局安装Typings

1、 npm install -g typings

 2.搜索你想要的插件,如 swiper:

1、 typings search swiper

搜索结果如下(有3个swiper资源):

1、 react-native-swiper dt     https://github.com/leecade/react-native-swiper#readme2、 swiper              dt     https://github.com/nolimits4web/Swiper3、 swiper/v2           dt     https://github.com/nolimits4web/Swiper

3.安装js库。

 (1)切换到你的项目根目录下,运行如下命令行:

  先是npm下载安装swiper插件库文件  

1、npm install swiper --save

  接着使用typings安装swiper插件

2、typings install dt~swiper -global --save

4,使用swiper.js插件库

(1)在你需要使用的page包内,在***.html文件中使用标签

<!--头部滚动条-->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let item of headerSlideData">
<img class="swiper-img" alt="{{item.alt}}" src="{{item.src}}">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>

(2)在需要用到swiper插件的 ***.ts文件中导入,并创建数据

1、 import * as Swiper from 'swiper';
// 初始化头部滚动条
private initHeaderSlide() {
this.oSwiper1 = new Swiper('.swiper-container', {
slidesPerView: 1,
paginationClickable: true,
centeredSlides: true,
autoplay: 2000,
autoplayDisableOnInteraction: false,
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 改变自动更新
observer:true,
observeParents:true
}); } private getHeaderSlideData() {
return [
{
alt: "双十一预热主场会",
src: "assets/img/home-headerSlide-1.jpg"
},
{
alt: "11月11天家电低价不停歇",
src: "assets/img/home-headerSlide-2.jpg"
},
{
alt: "家具盛典 好货提前抢",
src: "assets/img/home-headerSlide-3.jpg"
},
{
alt: "IT抢券节",
src: "assets/img/home-headerSlide-4.jpg"
},
{
alt: "潮流数码 双11爽购攻略",
src: "assets/img/home-headerSlide-5.jpg"
}
];
}

2、截止2017年11月07日,在执行npm install swiper --save时,npm会自动下载最新的swiper插件(我的swiper 4.0.3),实际调试中发现,该版本编译运行后,生成一堆不符合js语法的错误代码。

解决办法:

(1)在package.json文件中修改swiper扩展库的版本号为3.4.2。

(2)重新执行npm install 命令安装当前版本的swiper插件。

(3)重新执行ionic cordova build (run) android即可。

3、如果用第2步,typings search没有搜索到你要的库

但是,npm可以搜到相关ts文件,一定要是ts文件(比如ng开头的,如ng-circle-progress),才会有*.d.ts声明文件,才可以直接引用
例如:circle-progress这个库在typings搜索没有,但是可以:
1、 npm search circle-progress (npm搜索插件有插件存在)
2、 npm install ng-circle-progress --save (使用 npm 安装所需要的插件)

然后第4步引用就一样了。

ionic3.0--angular4.0 引入第三方插件库的方法的更多相关文章

  1. angular4,6 引入第三方插件的方法

    话不多说直入主题,最常见的有三种方式来引用第三方插件,下面以jquery插件及基于JQuery的两款插件:nicescroll和rangeSlider为例. 一.第一种方式:在.angular-cli ...

  2. vue-cli项目中引入第三方插件

    前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如 ...

  3. 【转】Android中引入第三方Jar包的方法(java.lang.NoClassDefFoundError解决办法)

    原文网址:http://www.blogjava.net/anchor110/articles/355699.html 1.在工程下新建lib文件夹,将需要的第三方包拷贝进来.2.将引用的第三方包,添 ...

  4. Vue引入第三方JavaScript库和如何创建自己的Vue插件

    一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...

  5. 使用.NET 6开发TodoList应用(3)——引入第三方日志库

    需求 在我们项目开发的过程中,使用.NET 6自带的日志系统有时是不能满足实际需求的,比如有的时候我们需要将日志输出到第三方平台上,最典型的应用就是在各种云平台上,为了集中管理日志和查询日志,通常会选 ...

  6. Android NDK编程,引入第三方.so库

    android自带的编译工具NDK进行编译时(非单纯的调用第三方.so而是进行ndk编程),armeabi以及armeabi-v7a文件夹下的第三方so文件将会被删除,只会产生编译后的so文件,其他的 ...

  7. web前端之 CSS引入第三方插件

    引入第三方图标插件 - fontawesome 官网地址:http://fontawesome.io/ 1.下载图标插件包 下载地址:https://codeload.github.com/FortA ...

  8. Xcode6 引入第三方静态库project的方法

    首先.介绍一下把在当前project中引入其它依赖project的方法: 第一:把其它项目project加入到现有project做法: 定义: FPro 现有project == 父project C ...

  9. 【经验总结】关于使用某些第三方插件库元素设置display:none后重新show不显示的问题;(display、opacity、宽高0的使用场景)

    display:none 直接取消元素所占用的位置(但是元素还是存在的),后面元素看他就相当于不存在了: opacity:0  隐藏,但是其依旧占用位置: height.width:0 和displa ...

随机推荐

  1. Javascript中的noscript

    引言: 在浏览器日常火爆的时代,个大浏览器几乎都想占主导地位,争个你死我活,所以现在的各大浏览器都支持javascript脚本语言,但是在童鞋们,我们假设一下,万一哪个用户出于安全,把浏览器的java ...

  2. springmvc返回枚举属性值

    使用fastJSON ,在枚举中写toString 方法 如下@Overridepublic String toString() {return "{" + this.name() ...

  3. sleep,yield,wait,notify,notifyAll

    1.wait,notify,notifyAll是Object的方法.他们必须在同步块中使用,并且当前线程必须已经获取了锁.wait方法,用来释放同步块对象上的锁,并且等待其他的线程唤醒(notify) ...

  4. #翻译#原文来自Database.System.Concepts(6th.Edition.2010)2.6Relational Operations,原文作者Abraham Silberschaz , Henry F. Korth , S. Sudarshan

    2.6关系操作 所有的过程关系查询语言都提供一组操作,这些操作可以应用于单个关系或一对关系.这些操作具有良好的和期望的属性,它们的结果总是一个单一的关系.这个属性允许一个以模块化的方式组合其中的几个操 ...

  5. bzoj3997组合数学(求最长反链的dp)

    组合数学 给出一个网格图,其中某些格子有财宝,每次从左上角出发,只能向下或右走.问至少走多少次才能将财宝捡完.此对此问题变形,假设每个格子中有好多财宝,而每一次经过一个格子至多只能捡走一块财宝,至少走 ...

  6. Java历程-初学篇 Day04选择结构(1)

    一,if 1,单分支 if(条件){ } 示例: 2,双分支 if(条件){ }else{ } 示例: 3,多重if if(条件){ }else if(条件){ }else{ } 示例: 4,嵌套if ...

  7. slf4j+log4j在Java中实现日志记录

    小Alan今天来跟大家聊聊开发中既简单又常用但必不可少的一样东西,那是什么呢?那就是日志记录,日志输出,日志保存. 后面就统一用日志记录四个字来形容啦. 日志记录是项目的开发中必不可少的一个环节,特别 ...

  8. Echarts数据可视化visualMap,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  9. cocos2dx - Sqlite简单封装使用

    前言: 一般游戏需要在手机上记录一些简单的信息,用来保存游戏的进度,玩家的分数等.SQLite作为轻量级.跨平台的关系型数据库,相当适合用于游戏数据的存储. 由于没有加密,有安全性问题,数据上还需要自 ...

  10. dotweb框架之旅 [四] - 常用对象-HttpContext

    dotweb属于一个Web框架,希望通过框架行为,帮助开发人员快速构建Web应用,提升开发效率,减少不必要的代码臃肿. dotweb包含以下几个常用对象: App(dotweb) App容器,为Web ...