大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍了基于vue2.0如何实现仿百度前端分页效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
站在用户的角度思考问题,与客户深入沟通,找到延津网站设计与延津网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站制作、成都做网站、企业官网、英文网站、手机端网站、网站推广、主机域名、网页空间、企业邮箱。业务覆盖延津地区。先看实现效果图
代码实现
按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路
1、需要提前设定哪些参数需要暴露出来给父组件传递
方法及参数说明
属性
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组件
共{{total}}条
- 上一页
- 1
- 下一页
前往页
3、在父组件中引入并使用组件
遇到的问题
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如何实现仿百度前端分页效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!