## 瀑布流分頁 瀑布流ajax分頁，結合content標簽對列表分頁。 ## 參數 | 參數名稱 | 可選值 | 默認值 | 是否必填 | 說明 | | --- | --- | --- | --- | --- | | auto | 1/0 | 0 | - | 1=自動加載，0=手動觸發 | | num | - | 默認同content標簽的num屬性保持一致 | - | 每次加載條數 | | icon | - | 加載中... | - | 加載中的提示文字，也可以是圖片 | | empty | - | 暫無更多數據 | - | 最后一頁的提示信息 | ## 參數說明 `auto` 是否自動加載屬性，1=滾動到位置時，開始加載下一頁。默認是0=手動點擊加載數據，寫法如下： 調用標簽后會有`{$item}`變量，將該變量賦值到標簽上即可。 ~~~ {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一致。 ~~~ {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寫法如下： ~~~ {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瀑布流分頁標簽 效果圖，看不清的話鼠標到圖片右鍵保存或者新窗口打開：  成功后會有個按鈕顯示。  <br /> 簡單代碼示例： ~~~ // 設置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> ~~~ 引用瀑布流分頁標簽 ~~~ {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 標簽包裹的內容 ~~~ <p><a href="{$item.url}">標題：{$item.title}</a></p> ~~~ <br /> > 若想自定義分頁處理函數，可在頁面上定義get_page_list方法： ~~~ <script> function get_page_list(obj, key) { } </script> ~~~