ionic3.0--angular4.0 引入第三方插件库的方法
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没有搜索到你要的库
1、 npm search circle-progress (npm搜索插件有插件存在)
2、 npm install ng-circle-progress --save (使用 npm 安装所需要的插件)
然后第4步引用就一样了。
ionic3.0--angular4.0 引入第三方插件库的方法的更多相关文章
- angular4,6 引入第三方插件的方法
话不多说直入主题,最常见的有三种方式来引用第三方插件,下面以jquery插件及基于JQuery的两款插件:nicescroll和rangeSlider为例. 一.第一种方式:在.angular-cli ...
- vue-cli项目中引入第三方插件
前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如 ...
- 【转】Android中引入第三方Jar包的方法(java.lang.NoClassDefFoundError解决办法)
原文网址:http://www.blogjava.net/anchor110/articles/355699.html 1.在工程下新建lib文件夹,将需要的第三方包拷贝进来.2.将引用的第三方包,添 ...
- Vue引入第三方JavaScript库和如何创建自己的Vue插件
一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...
- 使用.NET 6开发TodoList应用(3)——引入第三方日志库
需求 在我们项目开发的过程中,使用.NET 6自带的日志系统有时是不能满足实际需求的,比如有的时候我们需要将日志输出到第三方平台上,最典型的应用就是在各种云平台上,为了集中管理日志和查询日志,通常会选 ...
- Android NDK编程,引入第三方.so库
android自带的编译工具NDK进行编译时(非单纯的调用第三方.so而是进行ndk编程),armeabi以及armeabi-v7a文件夹下的第三方so文件将会被删除,只会产生编译后的so文件,其他的 ...
- web前端之 CSS引入第三方插件
引入第三方图标插件 - fontawesome 官网地址:http://fontawesome.io/ 1.下载图标插件包 下载地址:https://codeload.github.com/FortA ...
- Xcode6 引入第三方静态库project的方法
首先.介绍一下把在当前project中引入其它依赖project的方法: 第一:把其它项目project加入到现有project做法: 定义: FPro 现有project == 父project C ...
- 【经验总结】关于使用某些第三方插件库元素设置display:none后重新show不显示的问题;(display、opacity、宽高0的使用场景)
display:none 直接取消元素所占用的位置(但是元素还是存在的),后面元素看他就相当于不存在了: opacity:0 隐藏,但是其依旧占用位置: height.width:0 和displa ...
随机推荐
- Javascript中的noscript
引言: 在浏览器日常火爆的时代,个大浏览器几乎都想占主导地位,争个你死我活,所以现在的各大浏览器都支持javascript脚本语言,但是在童鞋们,我们假设一下,万一哪个用户出于安全,把浏览器的java ...
- springmvc返回枚举属性值
使用fastJSON ,在枚举中写toString 方法 如下@Overridepublic String toString() {return "{" + this.name() ...
- sleep,yield,wait,notify,notifyAll
1.wait,notify,notifyAll是Object的方法.他们必须在同步块中使用,并且当前线程必须已经获取了锁.wait方法,用来释放同步块对象上的锁,并且等待其他的线程唤醒(notify) ...
- #翻译#原文来自Database.System.Concepts(6th.Edition.2010)2.6Relational Operations,原文作者Abraham Silberschaz , Henry F. Korth , S. Sudarshan
2.6关系操作 所有的过程关系查询语言都提供一组操作,这些操作可以应用于单个关系或一对关系.这些操作具有良好的和期望的属性,它们的结果总是一个单一的关系.这个属性允许一个以模块化的方式组合其中的几个操 ...
- bzoj3997组合数学(求最长反链的dp)
组合数学 给出一个网格图,其中某些格子有财宝,每次从左上角出发,只能向下或右走.问至少走多少次才能将财宝捡完.此对此问题变形,假设每个格子中有好多财宝,而每一次经过一个格子至多只能捡走一块财宝,至少走 ...
- Java历程-初学篇 Day04选择结构(1)
一,if 1,单分支 if(条件){ } 示例: 2,双分支 if(条件){ }else{ } 示例: 3,多重if if(条件){ }else if(条件){ }else{ } 示例: 4,嵌套if ...
- slf4j+log4j在Java中实现日志记录
小Alan今天来跟大家聊聊开发中既简单又常用但必不可少的一样东西,那是什么呢?那就是日志记录,日志输出,日志保存. 后面就统一用日志记录四个字来形容啦. 日志记录是项目的开发中必不可少的一个环节,特别 ...
- Echarts数据可视化visualMap,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- cocos2dx - Sqlite简单封装使用
前言: 一般游戏需要在手机上记录一些简单的信息,用来保存游戏的进度,玩家的分数等.SQLite作为轻量级.跨平台的关系型数据库,相当适合用于游戏数据的存储. 由于没有加密,有安全性问题,数据上还需要自 ...
- dotweb框架之旅 [四] - 常用对象-HttpContext
dotweb属于一个Web框架,希望通过框架行为,帮助开发人员快速构建Web应用,提升开发效率,减少不必要的代码臃肿. dotweb包含以下几个常用对象: App(dotweb) App容器,为Web ...