---
layout: docs-demos
title: SUI Mobile Demo
---

<div class="page">
  <header class="bar bar-nav">
    <h1 class="title">多个标签页下的无限滚动</h1>
  </header>
  <div class="bar bar-standard bar-footer">
    <a class="icon icon-edit pull-left"></a>
    <a class="icon icon-settings pull-right"></a>
  </div>
  <div class="content" data-type="">
    <p>其他内容区域</p>
    <p>其他内容区域</p>
    <p>其他内容区域</p>
    <p>其他内容区域</p>
    <p>其他内容区域</p>
    <p>其他内容区域</p>
    <div class="buttons-tab fixed-tab" data-offset="44">
      <a href="#tab1" class="tab-link active button">全部</a>
      <a href="#tab2" class="tab-link button">待付款</a>
      <a href="#tab3" class="tab-link button">待发货</a>
    </div>

    <div class="tabs">
      <div id="tab1" class="tab active">
        <div class="content-block">
          <div class="buttons-row">
            <a href="#tab1-1" class="tab-link active button">Tab 1</a>
            <a href="#tab1-2" class="tab-link button">Tab 2</a>
            <a href="#tab1-3" class="tab-link button">Tab 3</a>
          </div>
          <div class="tabs">
            <p class='tab active' id='tab1-1'>This is tab 1-1 content</p>
            <p class='tab' id='tab1-2'>This is tab 1-2 content</p>
            <p class='tab' id='tab1-3'>13855589778</p>
          </div>
        </div>
      </div>
      <div id="tab2" class="tab infinite-scroll">
          <div class="list-block">
            <ul class="list-container">
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
            </ul>
          </div>
          <!-- 加载提示符 -->
          <div class="infinite-scroll-preloader">
            <div class="preloader">
            </div>
          </div>
      </div>
      <div id="tab3"  class="tab infinite-scroll">
          <div class="list-block">
            <ul class="list-container">
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
            </ul>
          </div>
          <!-- 加载提示符 -->
          <div class="infinite-scroll-preloader">
            <div class="preloader">
            </div>
          </div>
      </div>
    </div>
  </div>
</div>
<script src='/docs-demos/js/fixed-tab-infinite-scroll.js'></script>