• 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);
    }); 
  • 相关阅读:
    js bubbleSort
    关于“ ,”的迷
    移位
    emacs 一些很有用的快捷键
    input&output
    async&await
    用dbforge调试procedure
    开发中常用的工具
    用Firefox的debugger来调试JavaScript
    Hibernate映射关系配置
  • 原文地址:https://www.cnblogs.com/xwlong/p/7903297.html
Copyright © 2020-2023  润新知