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

时间：2023-11-26 13:00:26

一. Swiper

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

  • 官网
  • 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文档
  • 引入对应的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:放大结束后的回调

相关文章