<stl:more> 动态加载更多内容

<stl:more trigger="触发加载函数"> </stl:more>

说明

通过 <stl:more> 标签在模板中动态加载更多内容。

必须将<stl:pageContents>标签作为 <stl:more> 的子标签，用于显示更多内容列表。

<stl:more> 标签需要设置触发事件，已经无更多内容时的回调函数。

属性

属性	说明
trigger	设置触发加载更多内容的函数名称，默认为 more

trigger - 触发加载函数

设置触发加载更多内容的函数名称，默认为 more。

加载函数可以包含两个 JS 回调函数：noMore 函数以及 complete 函数

noMore 回调函数

当加载最后一页内容时触发该函数。

complete 回调函数

当动态加载完成后触发该函数。

示例

点击按钮加载更多内容列表，触发 noMore 回调

下面的例子在栏目模板中显示 6 条内容，点击 查看更多 按钮后依次加载内容列表，每次加载 6 条。

当加载到最后一页时隐藏查看更多按钮。

<stl:contents totalNum="6">
  <stl:a class="liobox">
    <div class="img">
      <stl:image></stl:image>
    </div>
    <div class="wen">
      <div class="h1">
        {Content.Title}
      </div>
      <div class="h2">
        <stl:content type="Body" isClearTags="true" wordNum="120"></stl:content>
      </div>
      <div class="h3">
        {Content.AddDate}
      </div>
    </div>
  </stl:a>
</stl:contents>

<stl:more>
  <stl:pageContents startNum="7" pageNum="6">
    <stl:a class="liobox">
      <div class="img">
        <stl:image></stl:image>
      </div>
      <div class="wen">
        <div class="h1">
          {Content.Title}
        </div>
        <div class="h2">
          <stl:content
            type="Body"
            isClearTags="true"
            wordNum="120"
          ></stl:content>
        </div>
        <div class="h3">
          {Content.AddDate}
        </div>
      </div>
    </stl:a>
  </stl:pageContents>
</stl:more>

<div
  id="textmore"
  class="textmore"
  onclick="more(function(){ $('#textmore').hide(); })"
>
  查看更多
</div>

我们在 查看更多 按钮的点击事件中触发了加载更多函数，函数中传递了 noMore 回调函数，用于设置当无更多内容时隐藏按钮本身。

最终效果界面：

点击按钮加载更多内容列表，触发 noMore 以及 complete 回调

下面的例子在栏目模板中显示 6 条内容，点击 查看更多 按钮后依次加载内容列表，每次加载 6 条。

当加载到最后一页时隐藏查看更多按钮。

<ul class="row" id="content">
  <stl:pageContents isImage="true" pageNum="12">
    <li
      class="col-lg-4 col-sm-6 box-w"
      data-src="{Content.ImageUrl}"
      data-sub-html="{Content.Title}"
    >
      <div class="box-s">
        <div class="box-img">
          <a href="javascript:;">
            <stl:image />
          </a>
        </div>
        <a href="javascript:;" class="box-title h16">{Content.Title}</a>
      </div>
    </li>
  </stl:pageContents>

  <stl:more>
    <stl:pageContents isImage="true" startNum="13" pageNum="12">
      <li
        class="col-lg-4 col-sm-6 box-w"
        data-src="{Content.ImageUrl}"
        data-sub-html="{Content.Title}"
      >
        <div class="box-s">
          <div class="box-img">
            <a href="javascript:;">
              <stl:image />
            </a>
          </div>
          <a href="javascript:;" class="box-title h16">{Content.Title}</a>
        </div>
      </li>
    </stl:pageContents>
  </stl:more>
</ul>

<div class="more">
  <a
    href="javascript:;"
    class="page-phone mobile-page"
    onclick="more(noMore, complete)"
    >查看更多</a
  >
</div>

<script type="text/javascript">
  function noMore() {
    $(".more").hide();
  }
  function complete() {
    lightGallery(document.getElementById("content"), {
      speed: 500
    });
  }
</script>

我们在 查看更多 按钮的点击事件中触发了加载更多函数，函数中传递了 noMore 回调函数以及 complete 回调函数，用于设置当无更多内容时隐藏按钮本身以及当动态加载完毕后调用相册功能。

最终效果界面：