vue分页组件动态页码_怎样分页设置页码

vue分页组件动态页码_怎样分页设置页码效果如下:HTML:<ulclass=”pagef16tcmt30″><li><spanv-if=”page>1″><b@click=”page–,pageClick()”>上一页</b></span><spanv-if=”page==1″>上一页</span><spanv-for=”indexinpagesAll”:key=”index”.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

效果如下:

vue分页组件动态页码_怎样分页设置页码

HTML:

<ul class="page f16 tc mt30">
<li>
<span v-if="page > 1"><b @click="page--,pageClick()">上一页</b></span>
<span v-if="page == 1">上一页</span>
<span v-for="index in pagesAll" :key="index" :class="{'active':page == index}" @click="goPage(index)">{
  
  {index}}</span>
<span v-if="page!=pageAll"><b @click="page++,pageClick()">下一页</b></span>
<span v-if="page == pageAll">下一页</span>
</li>
<li>共{
  
  {pageAll}}页</li>
<li>到<input type="text" class="int02" v-model="jumpPage"> 页<input type="button" class="bt03" value="确定" @click="goPage(jumpPage)"></li>
</ul>

CSS:

.page li{display:inline-block;margin:0 5px;}
.page li span{display:inline-block;padding:5px 10px;border:1px solid #dfdfdf;margin:0 5px;border-radius:5px;cursor:pointer;}
.page li span.active,.page li span:hover{border:1px solid #316dd9;background:#316dd9;color:#fff;}
.page b{display:block;font-weight:normal;}
.page .int02,.page .bt03{line-height:32px;border:1px solid #ccc;vertical-align:middle;margin:0 10px;border-radius:5px;}
.page .int02{width:40px;text-align:center;}
.page .bt03{background:#316dd9;color:#fff;border:none;padding:0 30px;line-height:36px;margin-left:20px;}

JS:

data(){
    return{
      listData:"",//旅行社列表数据搜索结果数据
      // pageSize:15, //每页个数,后台默认15
      page:1,//当前页码,不传默认第一页
      pageAll:"", //数据总页数
      jumpPage:"",//跳转页码
    }
},
methods:{
    //获取旅行社列表数据 keywords words搜索关键字,region_id id区域id,page onPage当前页码
    getTravel(event){
    
    ....数据列表获取.....
 
        if (response.data.status==1) {
            console.log(response.data.data);
            this.pageAll = response.data.data.count;
            this.listData = response.data.data.data;
        }else{
            console.log(response.data.info);
        }

    ....数据列表获取.....

    },
    //点击上一页下一页
    pageClick(){       
      this.getTravel(this.page); //获取列表数据 
      window.scrollTo(0,500); //页面滚动到顶部
    },
    //点击页码或跳转指定页码
    goPage(event){
      if(event != this.page && event != ""){
        this.page = event
        this.getTravel(this.page); //获取列表数据
        window.scrollTo(0,500); //页面滚动到顶部
      }
    },
      
},
computed: {
    pagesAll(){
        // 开始数字
        var leftNum = 1;
        // 结束数字
        var rightNum = this.pageAll;
        // 存储页码数组
        var pageArray = [];
        // 显示页码的数量 最好是个单数
        var showNum = 5;
        // 因为是单数向上取整获取到中间的数字
        var centerNum = Math.ceil(showNum/2);
        // 判断分析当总页数超过showNum展示页数时,需要判断分页情况
        //1、在最左边第一个或者在centerNum的前面
        //2、在中间
        //3、最右边最后一个
        if(this.pageAll >= showNum){	
            // 中间centerNum时左右都加上(centerNum-1)
            if(this.page > centerNum && this.page < this.pageAll - (centerNum - 1)){
                //一定要用Number格式化一下获取的数据,防止获取的是字符串而不是数字
                leftNum = Number(this.page) - (centerNum - 1)
                rightNum = Number(this.page) + (centerNum - 1)
            }else{
              //最左边或者在showNum的中间
              if(this.page <= centerNum){
                leftNum = 1
                rightNum = showNum
                // 最右边时结束是总条数,开始是showNum减去1
              }else{
                rightNum = this.pageAll
                leftNum = this.pageAll - (showNum - 1)
              }
           }
        }
        while (leftNum <= rightNum){
            pageArray.push(leftNum)
            leftNum ++
	    }
        return pageArray
    }
  } 

 划重点:

获取过来的页码数据一定要用Number()格式化一下!防止获取的是字符串而不是数字!T_T

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194127.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 深度学习中的自动编码器:TensorFlow示例

    深度学习中的自动编码器:TensorFlow示例什么是自动编码器?  自动编码器是重建输入的绝佳工具。简单来说,机器就是一个图像,可以生成一个密切相关的图片。这种神经网络中的输入是未标记的,这意味着网络能够在没有监督的情况下进行学习。更准确地说,输入由网络编码,仅关注最关键的特征。这是自动编码器因降维而流行的原因之一。此外,自动编码器可用于生成生成学习模型。例如,神经网络可以用一组面部训练,然后可以产生新的面部。Autoencoder如何工…

  • accept-encoding导致乱码问题

    accept-encoding导致乱码问题Accept-Encoding:gzip,deflate这个头信息是告诉服务器客户端所支持的压缩方式(然而数据压缩了但没有自动转,就会导致乱码)没有这个头信息说明客户端不支持压缩,要求不压缩直接返回文本

  • day2 javaee的入门知识「建议收藏」

    day2 javaee的入门知识「建议收藏」1、面向对象与面向过程的区别?面向过程的语言拥有封装、继承、多态的特性,使得整个代码灵活性高,比如Java,C++。容易维护,容易扩展。面向过程的语言直接跟内存打交道,性能要更好,比如java是需要跟虚拟机做交互,先编译解释成机器码。再跟操作系统打交道。大多数面向过程的语言基本都是直接编译成机器码在操作系统上进行执行。所以性能更好。但是java经过多年的发展,性能提升了很大,各位读者要记住javayyds!2、成员变量和局部变量的区别与c++不同的是java中没有全局变量的概念。成员变量:也称

  • MyBatis-延迟加载与MyBatis缓存(面试题)

    MyBatis-延迟加载与MyBatis缓存(面试题)MyBatis-延迟加载与MyBatis缓存-概念性MyBatis-延迟加载与MyBatis缓存MyBatis-延迟加载与MyBatis缓存-概念性延迟加载(面试题)1、什么是延迟加载(按需加载)2、延迟加载MyBatis缓存(面试题)1、Cache缓存2、MyBatis缓存分析3、一级缓存4、二级缓存原理开启二级缓存5、禁用二级缓存6、刷新二级缓存延迟加载(面试题)1、什么是延迟加载(按需…

  • 电子书 android高薪之路-android程序员面试宝典.pdf

    电子书 android高薪之路-android程序员面试宝典.pdf《Android高薪之路:Android程序员面试宝典》取材于各大IT公司面试真题,所给出的试题尽可能地覆盖了Android应用开发的各个方面,而且大多数试题都有解析部分,读者可以通过这部分更深入地理解试题中所包含的技术内容,希望真正做到由点成线,举一反三。 书中还将Android中涉及的各个常用技术问题进行筛选、分类。这样读者可以有的放矢,对自己还没有掌握的Android技术进行重点攻…

  • idea修改文字大小_为什么idea设置不了字体大小

    idea修改文字大小_为什么idea设置不了字体大小idea设置修改字体大小与样式详细步骤【备注】:不同idea版本设置方法类似,找到对应的面板设置即可第一步:点击工具栏最上方的File选项第二步:选择Setting选项第三步:选择Appearance选项,选择size设置自己喜欢的大小即可,我设置为14第四步:选择Editor选项中的font面板,同样找到size,设置对应的大小,即可设置代码主窗口的字体大小ide…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号