vue的一个分页组件的示例代码


Posted in Javascript onDecember 25, 2017

分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能。具体如下:

文件page.vue为一个pc端的分页组件,基础的分页功能都有,基本的思路是,页面是用数据来展示的,那就直接操作相关数据来改变视图

Getting started

import Page from './page.vue' 从目录引入该文件,在父组件注册使用

<page :total='total' :current-index="currentIndex" :listLen='listLen' @getPage='getPage'></page>

total:总页码
currentIndex:当前页码
listLen:页面ui要显示几个列表页
getPage: page组件把每个事件的页码发送给父组件,用来向后台发送相关请求来展示内容

about page.vue

html 部分

<ul class="item" v-show="arr.length">
    <li @click="start">首页</li>
    <li @click="pre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><<</a></li>  上一列表页
    <li @click="currentPre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><</a></li>   点解当前列表页上一页
    <li v-for="(item,index) in arr" :class="{active: item===num}" @click="getPage(item)">{{item}}</li>
    <li @click="currentNext"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >></a></li>  点解当前列表页下一页
    <li @click="next"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >>></a></li>  下一列表页
    <li @click="end">尾页</li>
  </ul>

相关数据说明

data() {
  return {
   num: Number, //表示当前页码高亮
   arr: [], //页面显示的数组
   page: Number, //一页显示多少个,可以自定义,不能大于总页码
   Remainder:Number, //是否整除
   merchant:Number, // 比较总页数和page页
  };
 },
 props: {
  //分页的总数
  total: {
   type: Number,
   default: 5
  },
  //当前页
  currentIndex: {
   type: Number,
   default: 1
  },
  //一个列表页显示多少页码
  listLen:{
   type: Number,
   default: 5
  }
 },

methods 里面的相关事件,思路主要是判断当前列表页的第一项和最后一项.通过循环来该变arr成员的值

bash

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

之前用ember.js写过一个类似组件,现在基于vue2.0封装一个,方便以后用于不同项目,可以拿来直接使用.

小总结:之前也接触过ng4,发现这些相似框架排除过渡动画,页面展示都是通过后台发过来或者前端模拟的数据来 渲染页面,当然这只是相通的一小部分,也是这类框架基本思想。

代码地址:https://github.com/hgchenhao/component

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
php对mongodb的扩展(初识如故)
Nov 11 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
koa源码中promise的解读
Nov 13 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
Vue自定义全局弹窗组件操作
Aug 11 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 #jQuery
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 #Javascript
推荐10款扩展Web表单的JS插件
Dec 25 #Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 #jQuery
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 #Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 #jQuery
Webpack优化配置缩小文件搜索范围
Dec 25 #Javascript
You might like
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
PHP积分兑换接口实例
2015/02/09 PHP
php限制ip地址范围的方法
2015/03/31 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
js函数排序的实例代码
2013/07/01 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
python显示生日是星期几的方法
2015/05/27 Python
python在控制台输出进度条的方法
2015/06/20 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
安全责任协议书
2014/04/21 职场文书
感恩节寄语2015
2015/03/24 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
新闻报道稿范文
2015/07/23 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
python基于turtle绘制几何图形
2021/06/15 Python