wfpage 瀑布流分頁 · HkCms tp6版使用手冊《免授權，永久商用》-02251406

# wfpage 瀑布流分頁 ## 瀑布流分頁瀑布流ajax分頁，結合content標簽對列表分頁。 ## 參數參數名稱可選值默認值是否必填說明auto1/00-1=自動加載，0=手動觸發num-默認同content標簽的num屬性保持一致-每次加載條數icon-加載中...-加載中的提示文字，也可以是圖片empty-暫無更多數據-最后一頁的提示信息## 參數說明 `auto` 是否自動加載屬性，1=滾動到位置時，開始加載下一頁。默認是0=手動點擊加載數據，寫法如下：調用標簽后會有`{$item}`變量，將該變量賦值到標簽上即可。 ``` <pre class="calibre16">``` {hkcms:wfpage auto="1"} <div class="text-center"> <a href="javascript:void(0);" class="btn btn-primary" {$item.click}>點擊加載更多</a> </div> {/hkcms:wfpage} ``` ``` `num` 每頁記錄數屬性，默認同content標簽的num一致。 ``` <pre class="calibre16">``` {hkcms:wfpage num="2"} <div class="text-center"> <a href="javascript:void(0);" class="btn btn-primary" {$item.click}>點擊加載更多</a> </div> {/hkcms:wfpage} ``` ``` `icon` 加載顯示的內容，默認是`加載中...`，除了文字，也支持html，html寫法如下： ``` <pre class="calibre16">``` {php}$icon = '<img src="/asset/201911/icon.jpg">';{/php} {hkcms:wfpage num="2" icon="$icon"} <div class="text-center"> <a href="javascript:void(0);" class="btn btn-primary" {$item.click}>點擊加載更多</a> </div> {/hkcms:wfpage} ``` ``` ## 使用說明詳細步驟如下，示例根據默認模板人才招聘演示： 1. 設置`content`內容列表標簽的上級html標簽 id="contentlist"，這個名字可以隨意取，設置后跟tagid屬性保持一致 2. 在你的模板目錄新增`common/page_contentlist.html`文件，里面的內容就放`content`標簽包裹的內容。 page\_contentlist文件名稱格式為：page\_(tagid屬性里填寫的名稱).html 3. 然后就可以調用wfpage瀑布流分頁標簽效果圖，看不清的話鼠標到圖片右鍵保存或者新窗口打開： ![](https://img.kancloud.cn/94/13/941372efdffcdc922c0090ced9086516_1586x699.png) 成功后會有個按鈕顯示。 ![](https://img.kancloud.cn/a5/3b/a53baf15c6125633761c2b389e53b4cb_167x68.png) 簡單代碼示例： ``` <pre class="calibre16">``` // 設置ID、與下面的tagid一致 <div id="contentlist"> {hkcms:content catid="$Cate['id']" num="6" page="1" tagid="contentlist"} <p><a href="{$item.url}">標題：{$item.title}</a></p> {/hkcms:content} </div> ``` ``` 引用瀑布流分頁標簽 ``` <pre class="calibre16">``` {hkcms:wfpage } <div class="text-center"> <button type="button" class="btn btn-primary" {$item.click}>點擊加載更多</button> </div> {/hkcms:wfpage} ``` ``` 4. common/page\_contentlist.html 文件內容就是hkcms:content 標簽包裹的內容 ``` <pre class="calibre16">``` <p><a href="{$item.url}">標題：{$item.title}</a></p> ``` ``` > 若想自定義分頁處理函數，可在頁面上定義get\_page\_list方法： ``` <pre class="calibre20">``` <script> function get_page_list(obj, key) { } </script> ``` ```