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. 页面中显示多个分页

只能通过异步请求文章接口实现,不能使用标签

Copyright © mingsoft.net 2021 all right reserved,powered by Gitbook该文件修订时间: 2024-02-02 10:21:12

results matching ""

    No results matching ""

    results matching ""

      No results matching ""