• Framework7 无限滚动


    html结构

    <div class="page">
        <div class="page-content infinite-scroll">
            ... 
        </div>
    </div>
    <div class="page-content infinite-scroll">
      <div class="list-block">
        <ul>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 1</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 2</div>
            </div>
          </li>
          ...
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 20</div>
            </div>
          </li>
        </ul>
      </div>
      <!-- Preloader -->
      <div class="infinite-scroll-preloader">
        <div class="preloader"></div>
      </div>
    </div> 

    js调用

    var myApp = new Framework7(); 
     
    var $$ = Dom7;
     
    // Loading flag
    var loading = false;
     
    // Last loaded index
    var lastIndex = $$('.list-block li').length;
     
    // Max items to load
    var maxItems = 60;
     
    // Append items per load
    var itemsPerLoad = 20;
     
    // Attach 'infinite' event handler
    $$('.infinite-scroll').on('infinite', function () {
     
      // Exit, if loading in progress
      if (loading) return;
     
      // Set loading flag
      loading = true;
     
      // Emulate 1s loading
      setTimeout(function () {
        // Reset loading flag
        loading = false;
     
        if (lastIndex >= maxItems) {
          // Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
          myApp.detachInfiniteScroll($$('.infinite-scroll'));
          // Remove preloader
          $$('.infinite-scroll-preloader').remove();
          return;
        }
     
        // Generate new items HTML
        var html = '';
        for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
          html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';
        }
     
        // Append new items
        $$('.list-block ul').append(html);
     
        // Update last loaded index
        lastIndex = $$('.list-block li').length;
      }, 1000);
    }); 
  • 相关阅读:
    十年经验手把手教你选购翡翠
    眼睛视力
    玻璃
    前端小技巧
    儿童牙齿矫正
    MySQL的JDBC驱动源码解析
    书海杂谈
    电子设备
    股市国家队
    影视
  • 原文地址:https://www.cnblogs.com/xwlong/p/7903297.html
Copyright © 2020-2023  润新知