iT邦幫忙

2018 iT 邦幫忙鐵人賽
2
Modern Web

30天學習30套前端技術(2018年)系列 第 60

[十分鐘學習] Infinite Scroll - 捲軸瀏覽至底載入新資料

example1

Infinite Scroll是一套當捲軸至底時,會載入下一個頁面的資料的原生JavaScript套件,在網路上很常見。行動裝置也支援

GitHub Star: 5,400
Javascripting Overall: -
瀏覽器: ChromeFirefoxIE10+
RWD: 支援
License: GPLv3


《安裝》

  • CDN

      <!-- Infinite Scroll v3.0.3 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/3.0.3/infinite-scroll.pkgd.min.js"></script>
    
  • npm

      $ npm install infinite-scroll
    
  • Bower

      $ bower install infinite-scroll --save
    
  • Yarn

      $ yarn add infinite-scroll
    

《範例》

  • 捲軸瀏覽至底載入另一頁面

      <style>
      	.article {
      		/* 排版用,不影響功能,*/
      		height: 300px;
      		margin: 50px;
      		background: #ccc;
      		font-size: 50px;
      		line-height: 300px;
      		text-align: center;
      	}
      </style>
      <div class="example">
      	<div class="article">1</div>
      	<div class="article">2</div>
      	<div class="article">3</div>
      	<div class="article">4</div>
      	<!-- 捲軸狀態 -->
      	<div class="scroller-status">
      		<div class="infinite-scroll-request loader-ellips"></div>
      		<p class="infinite-scroll-last">開始加載</p>
      		<p class="infinite-scroll-error">沒有頁面可以讀取了</p>
      	</div>
      </div>
      <script>
      	var infScroll = new InfiniteScroll( ".example", {
      		path: function() {
      			// 頁面路徑
      			if ( this.loadCount < 2 ) {
      				// 只讀取前兩頁資料
      				var nextIndex = this.loadCount + 2; // 2
      				return "page" + nextIndex + ".html"; // page2.html
      			}
      		},
      		append: ".article", // 匯入物件類別
      		status: ".scroller-status" // 捲軸狀態類別
      	})
      </script>
    

    [註1]

    屬性 描述
    path 頁面路徑
    append 匯入物件類別
    status 捲軸狀態類別

《延伸》

  1. Infinite Scroll
  2. metafizzy/infinite-scroll: ? Automatically add next page

上一篇
[十分鐘學習] Cleave.js - 欄位格式化工具
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言