2. 程式人生 > >手機端滾動分頁載入資料模型

手機端滾動分頁載入資料模型

阿新 • • 發佈：2019-02-15

說明:執行demo的時候請將瀏覽器模式調整到蘋果5

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
 

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 100%;
            height: auto;
        }

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear
 
: both;
            overflow: hidden;
        }

        li {
            list-style: none;
            width: 130px;
            height: 130px;
            background: pink;
            float: left;
            margin: 10px;
        }
    </style>
</head>

<body>
    <ul class="clearfix"
 
 id="list-group">

    </ul>
</body>
<script>
    function createLi(num) {
        var ulDom = document.getElementById("list-group");
        //每次建立num個
        for (var i = 0; i < num; i++) {
            var liDom = document.createElement("li");
            liDom.innerHTML = i;
            ulDom.appendChild(liDom);
        }
    }
    createLi(10);
    //獲取螢幕高度
    var maxHeight = document.documentElement.clientHeight;
    window.onscroll = function() {
        //獲取最後一個元素距離頂部的高度
        var liDomHeight = document.getElementById("list-group").lastChild.offsetTop;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //當最後一個距離頂部的距離小於螢幕的高度+滾動條的高度就載入資料
        if (liDomHeight < (maxHeight + scrollTop)) {
            createLi(10);
        }
    }
</script>

</html>

</html>

相關推薦

手機端滾動分頁載入資料模型

說明:執行demo的時候請將瀏覽器模式調整到蘋果5 <!DOCTYPE html> <html lang="en"> <head> <meta

js滾動分頁載入資料

實現理念： 1.判斷滾動條到底部觸發載入函式 2.請求資料 3.追加資料 html: <div class="list_flex" id="listrow"> <a href="./index.php?i=3&c=entry&m=ewei_

jquery 滾動條分頁載入資料

廢話不多說  直接擼 1.引入兩個js檔案，必須jquery第一個 <script src="jquery.min.js"/> <script src="jquery.infinit

【小程式】分頁載入資料，下拉載入更多，上拉重新整理

【 小程式】分頁載入資料，下拉載入更多，上拉重新整理 分頁載入的優點就不多說了，下面主要記錄一下幾個問題點。 scroll-view元件不能用在頁面根佈局中，不然觸發不了系統的onPullDownRefresh()、onReachBottom()回撥。 在Page頁

react-infinite-scroller元件滾動分頁載入

// 部分程式碼片段 import InfiniteScroll from 'react-infinite-scroller'; import {Scrollbars} from 'react-custom-scrollbars'; //初始的state的狀態 this.state =

JS 手機端滑動分頁外掛 SPager 最新版

JS /* SPager 呼叫說明 */ //第一步 建立 SPager物件 var spager = new SPager(4); 引數為 每頁 item 個數 PageSize //第二步 必須重寫 SPager 的 ReturnParentElement 方法 ，返回 item

Android GridView 分頁載入資料

android UI 往右滑動，滑動到最後一頁就自動載入資料並顯示 如圖： Java程式碼   package cn.anycall.ju;  import java.util.ArrayList;  import

面試問題之：Android中ListView分頁載入資料

熟悉Android的朋友們都知道，不管是微部落格戶端還是新聞客戶端，都離不開列表元件，可以說列表元件是Android資料展現方面最重要的元件，我們今天就要講一講列表元件ListView載入資料的相關內容。通常來說，一個應用在展現大量資料時，不會將全部的可用資料都呈現給

小程式分頁載入資料

(({ data }) => { if (data.object && data.object.list && data.object.list.length) { let list = data.object.list; fo

listview實現分頁載入資料的注意點

/**  * 未讀資訊list  */ public class MessageSecondLayerActivity extends Activity implements View.OnClickListener {     private ListView listView;     private L

微信小程式分頁載入資料

在使用類似qq，微博或者新聞類等資料量大的應用經常會遇到分頁載入功能，它不僅的應用場景廣，還能挺高使用者體驗。微信小程式中也可以分頁載入資料，這篇文章就是介紹。要實現這樣的功能，一般需要在請求資料時加入當前請求頁數，以及頁的大小（每頁顯示的數量）也有一部分介面是通過請求的開始

Adapter之大資料滑動效率優化和分頁載入資料

         在Android中如果要做到大資料分頁載入則需要我們的Activity實現OnScrollListener滾動條監聽介面。當如果要做的更加高大上。比如需要在使用者滑動至列表的底部，觸碰摸個區域，則需要實現OnTouchListener介面，等等。    

android ListView 動態分頁載入資料

　用ListView顯示資料時，列表中資料量大時，載入和處理時間會明顯變長，如果等到把所有資料都處理載入完成再顯示出來，那程式的UI就非常糟糕了，很可能會隨資料量的變大而變慢，這樣的介面很不友好，我們無法接受。 　廢話說完了，那怎麼解決這個的問題呢？ 　動態載入，分頁載

Android裡ListView分頁載入資料

當列表資料量大的時候我們一半都進行分頁，android裡分頁一半不同於PC端，第幾頁的方式，一般都是滑動到底部資料自帶載入，廢話不多數了直接看程式碼： ListActivity.java類： import java.util.ArrayList; import an

android中listview分頁載入資料

               前段時間做的新浪微博專案一直想實現listview分頁載入資料，今天終於實現了，哈哈！感覺挺好的，今天又寫了個demo給大家分享下。               首先說下listview的優化方案，這也是面試中常考的題目。優化方案有三種：1,如

微信小程式ajax請求分頁載入資料

分頁載入功能大家遇到的應該會經常遇到，應用場景也很多，例如微博，QQ，微信朋友圈以及新聞類應用，都會有分頁載入的功能，這不僅節省了我們使用者的流量，還提升了使用者體驗。那麼今天的這篇文章就是介紹微信小程式中如何實現分頁載入的功能。照例先上原始碼及效果圖。原始碼傳送門要實現這樣的功能，一般需要在請求資料時加入當

thinkphp+ajax 移動端實現滾動到底部載入資料(無重新整理動態載入資料技術的應用)

監聽滾動條的js檔案地址：http://ons.me/526.html 1、dropload.css檔案 .dropload-up,.dropload-down{     position: relative;     height: 0; &n

Vue 無限滾動（分頁載入）

1. 安裝 npm install vue-infinite-scroll --save 2. main.js中配置並使用 import infiniteScroll from 'vue-infinite-scroll'; Vue.use(infiniteS

ListView分頁載入，動態從網上拉取資料

最近做專案有個需求： （1）從網上獲取分頁資料； （2）在Android手機端顯示； （3）載入的動畫和文字； （4）資料超過40條時顯示滑動條等。 由於之前自己做的偏底層一點，所以這塊內容琢磨了蠻久，最後可以完美實現專案需求，內容見下面： 一、首先，需要有個佈局

ListView 分頁載入網路資料

1.分頁載入思路 （1）判斷是否滑動到底部 （2）當滑動到底部，往資料來源中新增資料，然後呼叫adapter.notifyDataSetChanged()方法重新整理顯示的listView資料。 2. 下面是糗事百科載入的例項，載入效果如下（為了顯示效