1. 分页 {ms:page.*/}
配合 ms:arclist 标签完成分页功能
1.1. 适用模版
列表模版
[!tip]使用分页标签时,只能在列表模版中单独使用
ms:arclist
不能被其他标签嵌套, 且必须使用参数ispaging=true
,一个列表页仅支持使用一次,通过使用参数size=6
可以指定一页展示文章数为6 ,自定义页面`不能使用分页标签注意:在主页模板选择分页效果模板,进行生成主页操作是不能看到分页效果的;分页效果必须生成栏目,且栏目的列表模板绑定的是带有分页效果的模板,才能看到分页效果
1.2. 格式
{ms:page.*}
1.3. 标签
字段名称 | 描述 |
---|---|
{ms:page.index/} | 首页链接 |
{ms:page.pre/} | 上一页 |
{ms:page.next/} | 下一页 |
{ms:page.last/} | 末页 |
{ms:page.cur/} | 当前页码 |
{ms:page.total/} | 总页数 |
{ms:page.rcount/} | 文章总数 |
[!tip]下一页上一页的顺序是根据文章在数据库的id主键顺序来定的,不是由自定义顺序来定的
2. 范例
2.1. 基本用法
<ul>
<li><a href="{ms:global.html/}{ms:page.index/}">首页</a></li>
<li><a href="{ms:global.html/}{ms:page.pre/}">上一页</a></li>
<li><a href="{ms:global.html/}{ms:page.next/}">下一页</a></li>
<li><a href="{ms:global.html/}{ms:page.last/}">末页</a></li>
<li>当前页/总页数<span>{ms:page.cur/}/{ms:page.total/}</span></li>
<li>共有:<span>{ms:page.rcount/}</span>篇文章</li>
</ul>
[!tip] 文章没有上一篇或下一篇时点击404可以使用逻辑标签判断
<#if pre.title?has_content>
<a href="{ms:global.html/}{ms:page.pre/}">上一页</a>
<#else>
没有上一页了
</#if>
2.2. 基于element-ui用法
下面是default\news-list.htm
默认模版里面的代码片段,分页显示效果 点击查看
<!--引入库-->
<script type="text/javascript" src="/static/plugins/vue/2.6.9/vue.min.js"></script>
<script src="/static/plugins/element-ui/2.15.7/index.min.js"></script>
<link rel="stylesheet" href="/static/plugins/element-ui/2.15.7/theme-chalk/index.min.css">
<div id="app">
...
<el-pagination
background
@current-change="handleCurrentChange"
:page-size="pageSize"
:current-page.sync="pageCur"
layout="prev, pager, next, jumper"
:total="contentCount">
</el-pagination>
...
</div>
...
<script>
var app = new Vue({
el: '#app',
data: {
//当前页数
pageCur: ${(page.cur)!1},
//每页文章条数
pageSize: ${(page.size)!20},
//页数总数
pageTotal: ${(page.total)!0},
//内容总数
contentCount: ${(page.rcount)!0}
},
methods: {
handleCurrentChange:function(val) {
// 没有使用短链接的方式分页
if (val == 1) { //首页
location.href = "{ms:global.html/}${field.categoryPath}/index.html";
} else { //其他页面 list-页码.html
location.href = "{ms:global.html/}${field.categoryPath}/list-" + val + ".html";
}
//使用了短链接的分页方式,在政务版开启短链或使用短链插件时用此方法分页
// if (val == 1) { //首页
// location.href = "{ms:global.html/}${field.categoryPinyin}.html";
// } else { //其他页面 list-页码.html
// location.href = "{ms:global.html/}${field.categoryPinyin}-" + val + ".html";
// }
}
}
})
</script>
...
[!tip]也可以通过jquery的插件来实现分页效果,标签${field.categoryPath}的含义是获取栏目拼音
2.3. 基于jQuery分页用法
https://www.jq22.com/jquery-info15113
...
$("#pagination3").pagination({
currentPage: ${(page.cur)!1},// 当前页数
totalPage: ${(page.total)!0},// 总页数
isShow: true,// 是否显示首尾页
count: ${(page.size)!20},// 显示个数
homePageText: "首页",// 首页文本
endPageText: "尾页",// 尾页文本
prevPageText: "上一页",// 上一页文本
nextPageText: "下一页",// 下一页文本
callback: function(current) {
// 回调,current(当前页数)
if(current==1) { //首页
location.href = "{ms:global.html/}${field.categoryPath}/index.html";
} else { //其他页面 list-页码.html
location.href = "{ms:global.html/}${field.categoryPath}/list-" + current + ".html";
}
}
});
...
2.4. 页面中显示多个分页
只能通过异步请求文章接口实现,不能使用标签