dede标签手机分页如何实现？

标签参数说明：

• listsize='5'：显示页码的数量，1,2,3,4,5...。
• listitem='index,pre,next,end,option'：定义分页列表显示哪些项目。
  • index：首页
  • pre：上一页
  • next：下一页
  • end：末页
  • option：跳转下拉框

步骤 2：编写手机端CSS样式

为了让分页在手机上看起来更美观、易用，我们需要为它添加CSS，通常我们会使用媒体查询（@media）来区分PC端和手机端。

在你的CSS文件中（/templets/你的模板/style/css.css）,添加以下样式：

/* PC端分页样式（保持原有样式或稍作调整） */
.dede_pages .pagelist {
    text-align: center;
    font-size: 12px;
    margin: 20px 0;
}
.dede_pages .pagelist li {
    display: inline-block;
    margin: 0 5px;
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 3px;
}
.dede_pages .pagelist a {
    color: #333;
    text-decoration: none;
}
.dede_pages .pagelist .thisclass {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}
/* ----------------- 手机端分页样式 ----------------- */
@media screen and (max-width: 768px) {
    /* 手机端分页容器样式 */
    .dede_pages .pagelist {
        /* 隐藏默认的列表样式，改用flex布局 */
        display: flex;
        justify-content: center; /* 居中 */
        align-items: center;    /* 垂直居中 */
        flex-wrap: wrap;        /* 允许换行 */
        padding: 10px;
        gap: 5px; /* 项目之间的间距 */
        list-style: none;       /* 移除列表样式 */
        margin: 15px 0;
    }
    /* 手机端每个页码的样式 */
    .dede_pages .pagelist li {
        display: inline-block; /* 在flex容器内仍需此属性 */
        margin: 0;
        padding: 8px 12px;      /* 增大点击区域 */
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f8f9fa;
        font-size: 14px; /* 适当增大字体 */
    }
    /* 链接样式 */
    .dede_pages .pagelist a {
        color: #333;
        text-decoration: none;
        display: block; /* 让链接充满整个li */
    }
    /* 当前页样式 */
    .dede_pages .pagelist .thisclass {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
    }
    /* 上一页/下一页样式 */
    .dede_pages .pagelist .pre a,
    .dede_pages .pagelist .next a {
        padding: 8px 15px; /* 比普通页码宽一点 */
    }
    /* 首页/末页样式，可以隐藏以节省空间 */
    .dede_pages .pagelist .first,
    .dede_pages .pagelist .end {
        display: none;
    }
    /* 跳转下拉框样式 */
    .dede_pages .pagelist select {
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
}

这个CSS样式实现了什么？

• 响应式布局： 当屏幕宽度小于768px时,自动应用手机端样式。
• Flex布局： 使用 display: flex 让分页项自动排列并居中,非常灵活。
• 增大点击区域： 增加了 padding,让用户更容易点击。
• 隐藏非必要项： 通常在手机端，首页、末页等按钮可以隐藏，只保留上一页、页码、下一页,使界面更简洁。

完全自定义分页（进阶）

如果你对分页的HTML结构和样式有非常高的要求，或者需要实现一些特殊功能（如无限滚动）,就需要自己动手实现。

步骤 1：获取分页数据

DedeCMS在列表页提供了几个关键的PHP变量,我们可以直接在模板中使用：

• @pageNO：当前页码。
• @totalPage：总页数。
• @totalResult：总文章数。

步骤 2：编写自定义分页逻辑和HTML

在模板文件中，用 if 和 else 等PHP标签结合上面的变量来构建分页。

{dede:list pagesize='10'}
    <!-- 你的列表内容 -->
    <a href="[field:arcurl/]">[field:title/]</a>
    <hr>
{/dede:list}
<!-- 自定义分页 -->
<div class="my-mobile-pagination">
    <!-- 上一页 -->
    <a href="{dede:global.cfg_phpurl/}/list.php?tid={dede:field.id/}&PageNo={dede:var.pageNO-1/}" class="prev-page {dede:var.pageNO == 1 ? 'disabled' : ''}">
        上一页
    </a>
    <!-- 页码列表 -->
    <div class="page-numbers">
        <!-- 首页 -->
        <a href="{dede:global.cfg_phpurl/}/list.php?tid={dede:field.id/}&PageNo=1" class="first-page {dede:var.pageNO == 1 ? 'thisclass' : ''}">1</a>
        <!-- 省略号和中间页码 -->
        {dede:if}
            <span class="dots">...</span>
            {dede:pageList listitem='num' listsize='2'}
            {/dede:pageList}
        {/dede:if}
        <!-- 末页 -->
        <a href="{dede:global.cfg_phpurl/}/list.php?tid={dede:field.id/}&PageNo={dede:var.totalPage/}" class="last-page {dede:var.pageNO == @totalPage ? 'thisclass' : ''}">{dede:var.totalPage/}</a>
    </div>
    <!-- 下一页 -->
    <a href="{dede:global.cfg_phpurl/}/list.php?tid={dede:field.id/}&PageNo={dede:var.pageNO+1/}" class="next-page {dede:var.pageNO == @totalPage ? 'disabled' : ''}">
        下一页
    </a>
</div>

代码解释：

• href 中的链接格式是 list.php?tid=[栏目ID]&PageNo=[页码],这是DedeCMS列表页的标准分页URL。
• {dede:var.pageNO == 1 ? 'disabled' : ''}：这是一个三元运算符，如果当前是第一页，给“上一页”按钮添加 disabled 类,我们可以在CSS中将其置灰或隐藏。
• {dede:pageList listitem='num' listsize='2'}：这个标签可以用来获取中间的页码数字，listsize='2' 表示当前页码前后各显示2个页码。
• {dede:if}...{/dede:if}：你可以用这个标签来控制省略号 的显示逻辑,例如当总页数很多且当前页不在中间时才显示。

步骤 3：为自定义分页编写CSS

/* 手机端自定义分页样式 */
@media screen and (max-width: 768px) {
    .my-mobile-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 15px 0;
    }
    .my-mobile-pagination a {
        display: block;
        padding: 8px 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        text-decoration: none;
        color: #333;
        font-size: 14px;
    }
    .my-mobile-pagination a.thisclass {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
    }
    .my-mobile-pagination a.disabled {
        color: #ccc;
        border-color: #eee;
        cursor: not-allowed;
    }
    .page-numbers {
        display: flex;
        gap: 5px;
        align-items: center;
    }
    .page-numbers .dots {
        color: #999;
    }
}

总结与建议

给新手的建议：

强烈推荐使用方法一，它简单、高效，并且足以应对90%的手机端分页需求，你只需要复制粘贴CSS代码,并根据你的模板稍作调整即可。

给有经验的开发者的建议：

如果你正在构建一个高度定制化的移动端网站，或者对性能有极致要求（想减少不必要的DOM节点），那么方法二是一个很好的选择,它能让你获得最大的控制权。