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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 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 inc文件使用的风险和注意事项
2013/11/12 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
php函数式编程简单示例
2019/08/08 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
js字母大小写转换实现方法总结
2013/11/13 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
vue组件的写法汇总
2018/04/12 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
python中OrderedDict的使用方法详解
2017/05/05 Python
python3 shelve模块的详解
2017/07/08 Python
Python函数式编程
2017/07/20 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
Ajax的工作原理
2015/12/04 面试题
环保建议书200字
2014/05/14 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
新农村建设标语
2014/06/24 职场文书
双拥工作宣传标语
2014/06/26 职场文书
店铺转让协议书
2015/01/29 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS