Swiper+ ejs模板引擎+ iScroll插件知識總結

一. Swiper

swiper是一個應用於移動端的動畫插件,原理相似於輪播圖css

  • 官網
  • 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結構,而不會引發屢次的迴流和重繪html

  • 引入ejs.js文件
    • 原理上,經過解析模板字符串來建立一個有效的html結構字符串,再一次性的添加到指定的元素當中
  • 在html中編寫對應的模板
    • script類型爲text/template
    • 賦予特定的ID值
    • 全部的js代碼必須使用<%%>包起來
      • 代碼以行塊的形式被解析,也就是一行中僅有js代碼,那麼整行都要用<%%>包起來
    • 變量引入時,使用<%=變量%>來調用變量
  • 在js中調用編寫好的模板
    • 經過id值獲取模板對應html內容
    • 使用ejs.render()方法來解析模板字符串
      • 第一個參數爲對應的模板字符串
      • 第二個參數爲一個對象,經過屬性名爲模板中的變量名,屬性值爲js中的變量名,來實現變量的傳遞
      • 返回值是解析完畢的模板字符串
    • 將上述返回的模板字符串添加到指定的DOM元素中便可

三. iScroll插件

iScroll是一款移動端使用的滾動插件,能實現上拉加載和下拉加載等特定的功能es6

  • 中文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:放大結束後的回調
相關文章
相關標籤/搜索