瀑布流分页
瀑布流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}
使用说明
详细步骤如下,示例根据默认模板人才招聘演示:
设置
content
内容列表标签的上级html标签 id="contentlist",这个名字可以随意取,设置后跟tagid属性保持一致在你的模板目录新增
common/page_contentlist.html
文件,里面的内容就放content
标签包裹的内容。
page_contentlist文件名称格式为:page_(tagid属性里填写的名称).html然后就可以调用wfpage瀑布流分页标签
效果图,看不清的话鼠标到图片右键保存或者新窗口打开: