《Angular2入门系列实践》——适应手机实现触屏滑动
来源:互联网 发布:退火算法实例matlab 编辑:程序博客网 时间:2024/05/22 04:25
前言 最近在ITOO的随堂小练中有一个滑屏的效果,为了实现效果,我在页面中引进了swiper.js插件,但是在这个过程中还是学习了一些东西! 内容
1.首先下载swiper.js和swiper.css放置到项目的assets文件下
2.然后将js的代码放置到angular的index.html的页面,这个是项目的起始页,只要项目加载,就会加载swiper的js和css文件;
3.然后我在要实现效果的component的html中添加swiper的样式
4.在component.ts文件的ngInit中写上如下代码:
const swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, longSwipesRatio: 0.3, //触发swiper所需要的最小拖动距离比例 touchRatio: 1, //滑动的拖放的,如果是1表示滑动之后换下一个界面是一整块,如果是0.5就表示才能滑一半。 observer: true, // 修改swiper自己或子元素时,自动初始化swiper observeParents: true, // 修改swiper的父元素时,自动初始化swiper });
其实这时候就会出现一个问题,Swiper未定义是我们常出现的问题,这时候我们的解决办法是在根目录的src下面找到文件typings.d.ts:
/** * 用于滑动窗体-常银玲 */declare var Swiper: any ;
总结当然用angular的前端工程化,最大的一个好处就是模块懒加载的机制,一旦放在这里,需要去加载资源,这个会影响不适用这个js的页面加载速度,但是我现在还没有找到更好的方法,还在学习当中,如果你正好看到了我的博客,也正好知道,请一定要告诉我!
阅读全文
0 0
- 《Angular2入门系列实践》——适应手机实现触屏滑动
- 《Angular2入门系列实践》——实现页面动画效果
- 《Angular2入门系列实践》——如何实现路由传值
- 《angular2入门系列实践》——表单验证详解
- 《Angular2入门系列实践》——如何添加ng-bootstrap插件
- 《Angular2入门系列基础》——angular2组件入门(一)
- 《Angular2入门系列基础》——pipe管道数据类型
- 《Angular2入门系列基础》——常见angular-cli命令
- 《angular2入门系列基础》——路由Route
- 《Angular2入门系列基础》——ActivatedRoute路由
- 《Angular2进阶系列实践》——(阅读理解)题型组件开发
- Angular2入门系列教程-服务
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- 安卓系统工具类、开发的时候有用的到哦。
- JS循环语句
- Maven配置环境变量
- HDU 5522 Numbers(枚举 + 二分查找)
- Hello World.
- 《Angular2入门系列实践》——适应手机实现触屏滑动
- Java中Comparable和Comparator的用法
- 什么是编程?
- django正向与反向查询
- HDU 6136 贪心+优先队列+并查集优化
- 2017北大信科夏令营机试B:编码字符串
- QT多线程使用总结
- JAVA8新特性[第五季]-并行流与串行流
- javescript机试题