1. 分页 {ms:page.*/}

配合 ms:arclist 标签完成分页功能

1.1. 适用模版

列表模版

[!tip]列表模版中使用 ms:arclist , 必须使用 ispaging=true

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.url/}{ms:page.index/}">首页</a></li>
<li><a href="{ms:global.url/}{ms:page.pre/}">上一页</a></li>
<li><a href="{ms:global.url/}{ms:page.next/}">下一页</a></li>
<li><a href="{ms:global.url/}{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.url/}{ms:page.pre/}">上一页</a>
<#else>
  没有上一页了
</#if>

2.2. 基于element-ui用法

下面是default\news-list.htm默认模版里面的代码片段,分页显示效果 点击查看

<!--引入库-->
<script type="text/javascript" src="{ms:global.host/}/static/plugins/vue/2.6.9/vue.min.js"></script>
<script src="{ms:global.host/}/static/plugins/element-ui/2.12.0/index.js"></script>
<link rel="stylesheet" href="{ms:global.host/}/static/plugins/element-ui/2.12.0/index.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.url/}/${field.categoryPath}/index.html";
      } else { //其他页面 list-页码.html
       location.href = "{ms:global.url/}/${field.categoryPath}/list-" + val + ".html";
      }
     }
    }
})
</script>
...

[!tip]也可以通过jquery的插件来实现分页效果

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.url/}/${field.categoryPath}/index.html";
    } else { //其他页面 list-页码.html
       location.href = "{ms:global.url/}/${field.categoryPath}/list-" + val + ".html";
    }

   }
});
...

2.4. 页面中显示多个分页

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

Copyright © mingsoft.net 2021 all right reserved,powered by Gitbook该文件修订时间: 2021-09-25 16:26:03

results matching ""

    No results matching ""

    results matching ""

      No results matching ""