《Angular2入门系列实践》——适应手机实现触屏滑动

前言

    最近在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的页面加载速度，但是我现在还没有找到更好的方法，还在学习当中，如果你正好看到了我的博客，也正好知道，请一定要告诉我！