专栏首页小白程序猿thinkphp移动端分页修改方案

thinkphp移动端分页修改方案

tihnkphp框架的分页方法在每一个开发程序中都会遇到,框架中的分页存在两个问题:一、样式没有默认;二、分页非响应式。上期我们说了tihnkphp分页样式,感兴趣的可以前往查看。

今天主要说下tihnkphp框架移动端分页样式如何调整;

一、使用方式

在thinkphp框架核心文件中找到library->think->paginator->driver->Bootstrap.php文件,将其打开在文件69行位置,添加PC和移动端判断方式,演示如下:

//true 需要自行判断
if(true){
    //手机端分页
}else{
    //PC端分页
}

二、示例代码:

//手机端分页
$side   = 3;
$window = $side * 2;

if ($this->lastPage < $window + 6) {
$block['first'] = $this->getUrlRange(1, $this->lastPage);
} else if ($this->currentPage <= $window - 4) {
//首页
$block['first'] = $this->getUrlRange(1, $window - 3);
$block['last']  = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
} else if ($this->currentPage > ($this->lastPage - $window + 4)) {
//尾页
$block['first'] = $this->getUrlRange(1, 2);
$block['last']  = $this->getUrlRange($this->lastPage - ($window - 4), $this->lastPage);
} else {
//中页
$block['first']  = $this->getUrlRange(1, 2);
$block['slider'] = $this->getUrlRange($this->currentPage, $this->currentPage);
$block['last']   = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
}

三、整个代码文件

/**
     * 页码按钮
     * @return string
     */
    protected function getLinks()
    {
        if ($this->simple) {
            return '';
        }

        $block = [
            'first'  => null,
            'slider' => null,
            'last'   => null,
        ];

        $side   = 3;
        $window = $side * 2;

        if(true){
            //手机端分页
            if ($this->lastPage < $window + 6) {
            $block['first'] = $this->getUrlRange(1, $this->lastPage);
            } else if ($this->currentPage <= $window - 4) {
            //首页
            $block['first'] = $this->getUrlRange(1, $window - 3);
            $block['last']  = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
            } else if ($this->currentPage > ($this->lastPage - $window + 4)) {
            //尾页
            $block['first'] = $this->getUrlRange(1, 2);
            $block['last']  = $this->getUrlRange($this->lastPage - ($window - 4), $this->lastPage);
            } else {
            //中页
            $block['first']  = $this->getUrlRange(1, 2);
            $block['slider'] = $this->getUrlRange($this->currentPage, $this->currentPage);
            $block['last']   = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
            }
        }else{
            //PC端分页
            if ($this->lastPage < $window + 6) {
                $block['first'] = $this->getUrlRange(1, $this->lastPage);
            } elseif ($this->currentPage <= $window) {
                $block['first'] = $this->getUrlRange(1, $window + 2);
                $block['last']  = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
            } elseif ($this->currentPage > ($this->lastPage - $window)) {
                $block['first'] = $this->getUrlRange(1, 2);
                $block['last']  = $this->getUrlRange($this->lastPage - ($window + 2), $this->lastPage);
            } else {
                $block['first']  = $this->getUrlRange(1, 2);
                $block['slider'] = $this->getUrlRange($this->currentPage - $side, $this->currentPage + $side);
                $block['last']   = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
            }
        }
        
        $html = '';

        if (is_array($block['first'])) {
            $html .= $this->getUrlLinks($block['first']);
        }

        if (is_array($block['slider'])) {
            $html .= $this->getDots();
            $html .= $this->getUrlLinks($block['slider']);
        }

        if (is_array($block['last'])) {
            $html .= $this->getDots();
            $html .= $this->getUrlLinks($block['last']);
        }

        return $html;
    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JQ实现倒计时功能

    使用JQ实现发送短信或阅读倒计时效果,结合bootstrap框架。直接上效果图:

    申霖
  • HTML标签介绍「程序员培养之路第一天」

    2、HTML 标签通常成对出现,分为标签开头和标签结尾,例:<html> </html>

    申霖
  • 第二节、编写简单代码《Python学习》

    3、 编写代码(编写工具使用notepad++),新建空白文件,输入如下代码,并保存为code1.py

    申霖
  • 如何写出优雅的 JS 代码?使用 SOLID 原则

    把这六个原则的首字母联合起来(两个 L 算做一个)就是 SOLID (solid,稳定的),其代表的含义就是这六个原则结合使用的好处:建立稳定、灵活、健壮的设计...

    前端小智@大迁世界
  • 重新撸一遍javascript (三)

    lilugirl
  • 为什么JavaScript中的this如此强大?

    译者按: JavaScript 中的 this 让开发者犯迷糊,但是也很灵活很强大。

    Fundebug
  • 第149天:javascript中this的指向详解

    js中的this指向十分重要,了解js中this指向是每一个学习js的人必学的知识点,今天没事,正好总结了js中this的常见用法,喜欢的可以看看:

    半指温柔乐
  • 实现一个同步的RenderApplication

    Nebula3 Sep2008 SDK之后渲染改成异步的了, 对于想直接操作内部API接口的我来说, 没法直接下手了

    逍遥剑客
  • 修炼内功之JavaScript设计模式(三)

    工作时间久了,自然对软件系统产生自己的思考,还会面临职业生涯的一个挑战。要不要成为一个技术负责人?

    童欧巴
  • Element Tabs 标签页 展示Echart 并随窗口变化自适应

    1、如何在一个div中展示不同的图表  (点击tab时为Chart组件赋值,并传给子组件,子组件监听数据变化并在 $nextTick 中重新绘制表格)

    tianyawhl

扫码关注云+社区

领取腾讯云代金券