Swiper+ ejs模板引擎+ iScroll插件知识总结

一. Swiper

swiper是一个应用于移动端的动画插件,原理相似于轮播图

• 官网
  • http://www.swiper.com.cn/#
• html结构

  <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 class="swiper-pagination"></div> <!-- 若是须要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 若是须要滚动条 --> <div class="swiper-scrollbar"></div> </div> 导航等组件能够放在container以外

• 引入css样式文件和js文件
• 初始化
  • 建立Swiper的实例

  var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', loop: true, // 若是须要分页器 pagination: '.swiper-pagination', // 若是须要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 若是须要滚动条 scrollbar: '.swiper-scrollbar', })

  • 在参数对象中使用特定的属性名和属性值,便可调用对应效果
  • 在AJAX异步请求中,swiper的初始化要在页面内容成功加载完成后进行

二. ejs模板引擎

ejs模板引擎与es6模板引擎同样,能够一次性的改变html结构,而不会引发屡次的回流和重绘

• 引入ejs.js文件
  • 原理上,经过解析模板字符串来建立一个有效的html结构字符串,再一次性的添加到指定的元素当中
• 在html中编写对应的模板
  • script类型为text/template
  • 赋予特定的ID值
  • 全部的js代码必须使用<%%>包起来
    • 代码以行块的形式被解析,也就是一行中仅有js代码,那么整行都要用<%%>包起来
  • 变量引入时,使用<%=变量%>来调用变量
• 在js中调用编写好的模板
  • 经过id值获取模板对应html内容
  • 使用ejs.render()方法来解析模板字符串
    • 第一个参数为对应的模板字符串
    • 第二个参数为一个对象,经过属性名为模板中的变量名,属性值为js中的变量名,来实现变量的传递
    • 返回值是解析完毕的模板字符串
  • 将上述返回的模板字符串添加到指定的DOM元素中便可

三. iScroll插件

iScroll是一款移动端使用的滚动插件,能实现上拉加载和下拉加载等特定的功能

• 中文api文档
  • http://www.360doc.com/content/14/0724/11/16276861_396699901.shtml
• 引入对应的iScroll.js文件
• 初始化
  • 建立iScroll的实例
    • 第一个参数为指定的DOM元素或者ID值
    • 第二个参数为参数对象

  var myIScroll=new iScroll("wrapper",{ vScroll:true, momentum:true })

  • 参数设置
    • hScroll/vScroll:是否容许水平/垂直滚动
    • bounce:是否超过实际位置反弹
    • bounceLock:当内容少于滚动是否能够反弹
    • momentum:是否开启拖动惯性
    • lockDirection:当水平或垂直拖动时是否锁定另外一边的拖动
    • useTransform:是否使用CSS变形
    • useTransition:是否使用CSS变换
    • checkDOMChanges:是否自动检测内容变化
    • topOffset:已经滚动的基准值(通常用在拖动刷新)
    • x:滚动水平初始位置（负值）
    • y:滚动垂直初始位置（负值）
    • Scrollbar的相关参数
      • hScrollbar/vScrollbar:是否显示水平/垂直滚动条
      • fixedScrollbar:在iOS系统上，当元素拖动超出了scroller的边界时，滚动条会收缩，设置为true能够禁止滚动条超出scroller的可见区域
      • hideScrollbar:是否隐藏滚动条
      • fadeScrollbar:滚动条是否渐隐渐显
    • Zoom放大相关的参数
      • zoom:是否放大
      • zoomMin:放大的最小倍数
      • zoomMax:放大的最大倍数
      • doubleTapZoom:双击放大倍数
    • Function 自定义函数
      • onRefresh:refresh的回调
      • onScrollStart:开始滚动的回调
      • onBeforeScrollMove:在内容移动前的回调
      • onScrollMove:内容移动的回调
      • onBeforeScrollEnd:在滚动结束前的回调
      • onScrollEnd:在滚动完成后的回调
      • onTouchEnd:手离开屏幕后的回调
      • onDestroy:销毁实例的回调
      • onZoomStart:放大开始时的回调
      • onZoom:放大的回调
      • onZoomEnd:放大结束后的回调