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> ``` ```