我的编程空间,编程开发者的网络收藏夹
学习永远不晚

基于vue2.0如何实现仿百度前端分页效果

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

基于vue2.0如何实现仿百度前端分页效果

这篇文章主要介绍了基于vue2.0如何实现仿百度前端分页效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

先看实现效果图

基于vue2.0如何实现仿百度前端分页效果

代码实现

按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路

1、需要提前设定哪些参数需要暴露出来给父组件传递

<Paging 
   :name="name"
   @change="onPageChange"
   :page-size="size"
   :total="total"
   layout="jumper,total"
   :current-page="curPage"
  />

方法及参数说明
属性
page-size 每页显示条目个数
total 总条目数
current-page 当前页数
layout 布局 默认不显示 jumper,total

事件

change 当前页改变时触发

2、再一个就是涉及到的父子组件通信

这里主要通过props向子组件传递参数

 在子组件中使用emit自定义事件返回数据给父组件

a.字符串数组形式props

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

或者指定每个prop的值类型

props: {
 title: String,
 likes: Number,
 isPublished: Boolean,
 commentIds: Array,
 author: Object
}

b.props验证

props: {
  // 基础的类型检查 (`null` 匹配任何类型)
  propA: Number,
  // 多个可能的类型
  propB: [String, Number],
  // 必填的字符串
  propC: {
   type: String,
   required: true
  },
  // 带有默认值的数字
  propD: {
   type: Number,
   default: 100
  },
  // 带有默认值的对象
  propE: {
   type: Object,
   // 对象或数组默认值必须从一个工厂函数获取
   default: function () {
    return { message: 'hello' }
   }
  },
  // 自定义验证函数
  propF: {
   validator: function (value) {
    // 这个值必须匹配下列字符串中的一个
    return ['success', 'warning', 'danger'].indexOf(value) !== -1
   }
  }
 }

使用props传递数据给子组件 ,子组件主要有三种形式来接收到父组件传递过来的参数
props字符串数组、指定每个prop值类型以及props验证,通常我们会使用props验证

分析完之后,接下来我们可以冻手实现了

1、这里我们用vue-cli先创建一个vue项目

安装vue-cli

$npm install -g vue-cli

创建vue项目

$vue init webpack my-project

项目运行

$cd my-project
$npm run dev

2、在components文件下创建一个Paging组件

<template>
 <div class="paging clearfix">
   <div class="page-size fl" v-if="isShowTotal">共{{total}}条</div>
    <ul class="page-list fl clearfix">
      <li @click="changePage(currentPage-1)">上一页</li>
      <li :class="{'active':currentPage==item.val}" v-for="item in pagelist" v-text="item.text" @click="changePage(item.val)">1</li>
      <li @click="changePage(currentPage+1)">下一页</li>
    </ul>
    <div class="page-jump fl" v-if="isShowJumper">
      前往<input class="input" type="text" v-model="toPage" @keydown="submit(toPage,$event)">页
      <!-- <button @click="changePage(toPage)">确定</button> -->
    </div>
 </div>
</template>

<script>
export default {
 name: 'Paging',
 // props:[
 //  'name'
 // ],
 // prop验证
 props:{
  name:String,
  pageSize: {
   type: Number,
   default: 10
  },
  total: {
   type: Number,
   default: 0
  },
  currentPage: {
   type: Number,
   default: 1
  },
  layout:{
    type: String
  }
 },
 data () {
  return {
      isShowJumper:false,
      isShowTotal:false,
    toPage:'',//跳转到x页
      pageGroup:10//可见分页数量 默认10个分页数
  }
 },
 created: function () {
    console.log('created');
    this.isShowTotal = this.layout.indexOf('total')!==-1;
    this.isShowJumper = this.layout.indexOf('jumper')!==-1;
  },
  mounted: function () {
    console.log('mounted',this.layout);
  },
  computed:{
    totalPage:function(){
      return Math.ceil(this.total / this.pageSize)
    },
    pagelist:function(){
      var list = [];
      var count = Math.floor(this.pageGroup/2), center = this.currentPage;
      var left = 1,right = this.totalPage;

      if(this.totalPage>this.pageGroup){
        if(this.currentPage>count+1){
          if(this.currentPage < this.totalPage - count){
            left = this.currentPage - count;
            right = this.currentPage + count-1;
          }else{
            left = this.totalPage - this.pageGroup+1;
          }
        }else{
          right = this.pageGroup;
        }
      }

      // 遍历添加到数组里
      while(left<=right){
        list.push({
          text:left,
          val:left
        });
        left++;
      }
      return list;
    }
  },
 methods:{
  // 回车事件
  submit(toPage,e){
    // console.log('e.keyCode',toPage,e.keyCode)
    // key.Code === 13表示回车键 
    if(e.keyCode === 13){
      //逻辑处理
      this.changePage(toPage);
    }
  },
  changePage:function(idx){
    if(idx!=this.currentPage && idx>0 && idx<=this.totalPage){
      // 触发父组件事件 pageChange会转换成小写pagechange
      this.$emit('change',{curPage:Number(idx)});
      }
  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
    padding: 0;
    margin: 0;
}
.fl{
  float: left;
}
.clearfix:after{
  display: block;
  content: '';
  clear: both;
}
.page-size{
    height: 26px;
  line-height: 26px;
}
.page-list{

}
.page-jump{
    height: 26px;
  line-height: 26px;
  margin-left: 20px;
}
.page-jump .input{
  width: 32px;
    padding: 4px 2px;
  border-radius: 2px;
  border: 1px solid #dcdfe6;
  margin: 0 4px;
}
  ul{
    list-style: none;
  }
  ul li{
    float: left;
    color: #606266;
    background: #f4f4f5;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 2px;
    margin: 0 5px;
  }
  ul>li.active{
    background: #409eff;
    color:#fff;
  }
</style>

3、在父组件中引入并使用组件

<template>
 <div>
  <!-- 分页组件 -->
  <Paging 
   :name="name"
   @change="onPageChange"
   :page-size="size"
   :total="total"
   layout="jumper,total"
   :current-page="curPage"
  />
 </div>
</template>
<!-- 
Paging属性 
page-size 每页显示条目个数
total 总条目数
current-page 当前页数
layout 布局 默认不显示 jumper,total

Paging事件

change 当前页改变时触发
 -->
<script>

import Paging from '@/components/Paging';
export default {
 name: 'Index',
 components:{
  Paging
 },
 data () {
  return {
   msg: 'hello',
   name:'阿健a',
   size:10,
   total:201,
   curPage:1
  }
 },
 methods:{
  onPageChange:function(page){
   this.curPage = page.curPage;
  }
 }
}
</script>

遇到的问题

1、在子组件中修改currentPage时报错

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

在使用组件时,传入的prop,被组件内部又做了一次修改

 避免直接修改prop,因为当父组件重新呈现时,值将被覆盖

changePage:function(idx){
    if(idx!=this.currentPage && idx>0 && idx<=this.totalPage){
      this.currentPage = idx;
      // 触发父组件事件 pageChange会转换成小写pagechange
      this.$emit('change');
      }
  }

解决

 修改代码,通过emit传递curPage给父组件,让父组件修改

changePage:function(idx){
    if(idx!=this.currentPage && idx>0 && idx<=this.totalPage){
      // 触发父组件事件 pageChange会转换成小写pagechange
      this.$emit('change',{curPage:idx});
      }
  }

父组件监听事件更新curPage

onPageChange:function(page){
   this.curPage = page.curPage;
  }

感谢你能够认真阅读完这篇文章,希望小编分享的“基于vue2.0如何实现仿百度前端分页效果”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

基于vue2.0如何实现仿百度前端分页效果

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

web前端如何实现360度全景效果

今天小编给大家分享一下web前端如何实现360度全景效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。使用插件:photo-
2023-07-05

如何利用css3实现进度条效果及动态添加百分比

这篇文章主要介绍了如何利用css3实现进度条效果及动态添加百分比,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。代码:2023-06-08

如何实现基于Java SpringBoot的前后端分离信息管理系统

这篇文章主要介绍了如何实现基于Java SpringBoot的前后端分离信息管理系统,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。主要功能说明用户登录、修改密码、首页介绍、数
2023-06-21

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录