利用VUE框架,实现列表分页功能示例代码


Posted in Javascript onJanuary 12, 2017

先来看一下效果图:

利用VUE框架,实现列表分页功能示例代码 

利用VUE框架,实现列表分页功能示例代码 

利用VUE框架,实现列表分页功能示例代码

功能描述:

1. 点击页面序号跳转到相应页面;

2. 点击单左/单右,向后/向前跳转一个页面;

3. 点击双左/双右,直接跳转到最后一页/第一页;

4. 一次显示当前页面的前三个与后三个页面;

5. 始终显示最后一个页面;

HTML:

<!-- 分页开始 -->
<div class="u-pages" style="margin-bottom:20px; margin-top:10px;">
 <ul>
   <li v-if="showPre" class="crt"><a v-on:click="jumpFirst(cur)"> << </a></li>
   <li v-if="showPre" class="crt"><a v-on:click="minus(cur)"> < </a></li>

   <template v-for="index in indexs" >
     <li class="{{classRenderer(index)}}">
       <a v-on:click="btnClick(index)" >{{index}}</a>
     </li>
   </template>

   <li v-if="showMoreTail" class="crt">..</li>
   <li class="{{classRenderer(pageNo)}}"><a @click="btnClick(pageNo)">{{pageNo}}</a></li>
   <li v-if="showTail" class="crt"><a v-on:click="plus(cur)">></a></li>
   <li v-if="showTail" class="crt"><a v-on:click="jumpTail(cur)">>></a></li>

 </ul>
</div>
<!-- 分页结束 -->

HTML方法分析: 

1、

<li class="{{classRenderer(index)}}">

classRenderer()方法实现了当点击页面索引是,点击页面获得选中效果

2、

<a v-on:click="btnClick(index)" >{{index}}</a>

btnClick()方法,实现了点击页面索引,跳转到相应页面

showPre showTail

showPre控制跳转到第一页与跳转到前一页的按钮的显示与消除

showTail控制跳转到最后一页与跳转到后一页的按钮的显示与消除

cur

记录当前页序号

jumpFirst(cur) minus(cur) plus(cur) jumpTail(cur)

实现按钮跳转功能

JS:

module.exports = {
    data: function () {
      return {
        cur:1,
        showTail:true,
        showMorePre: false,
        showMoreTail: false,       

      }
    },
    methods:{
    jumpFirst:function(data){
        var $this = this;
        data = 1;
        $this.cur = data;
        if (data == 1 )
        {
          $this.$set("showPre", false);
        }else
        {
          $this.$set("showPre", true);
        }
        $this.$am.ajax({
          url:window.$ApiConf.api_order_detail_list,
          type:'GET',
          data:{start: 1},
          success: function(data){
            console.log(data);
            $this.$set("records", data.record.records);
            $this.$set("start", data.record.query.start);
            $this.$set("total", data.record.query.total);
            $this.$set("limit", data.record.query.limit);
          }
        })
        $this.$set("showTail", true);
        return data;
      },
      minus:function(data){
        var $this = this;
        data--;
        $this.cur = data;
        $this.$set("showTail", true);
        if(data == 1){
          $this.$set("showPre", false);

        }else{
          $this.$set("showPre", true);
        }

        $this.$am.ajax({
          url:window.$ApiConf.api_order_detail_list,
          type:'GET',
          data:{start: 1 + $this.limit * (data-1) },
          success:function(data){
            console.log(data);
            $this.$set("records", data.record.records);
            $this.$set("start", data.record.query.start);
            $this.$set("total", data.record.query.total);
            $this.$set("limit", data.record.query.limit);
          }
        })
        return data;
      },
      plus: function(data){
        var $this = this;
        data++;
        $this.cur = data;
        $this.$set("showPre", true);
        if (data == $this.pageNo)
        {
          $this.$set("showTail", false);
        }else
        {
          $this.$set("showTail", true);
        }
        $this.$am.ajax({
          url:/* 这里写上你自己请求数据的路径 */,
          type:'GET',
          data:{start: 1 + $this.limit * (data-1) },
          success:function(data){
            console.log(data);
            $this.$set("records", data.record.records);
            $this.$set("start", data.record.query.start);
            $this.$set("total", data.record.query.total);
            $this.$set("limit", data.record.query.limit);
          }
        })
        return data;
      },
      classRenderer:function(index){
        var $this = this;
        var cur = $this.cur;
        if(index != cur){
          return 'crt';
        }
        return '';
      },
      btnClick:function(data){
        var $this = this;
        if(data == 1){
          $this.$set("showPre", false);

        }else{
          $this.$set("showPre", true);
        }
        if (data == $this.pageNo)
        {
          $this.$set("showTail", false);
        }else
        {
          $this.$set("showTail", true);
        }
        if (data != $this.cur)
        {
          $this.cur = data;
          $this.$am.ajax({
            url:window.$ApiConf.api_order_detail_list,
            type:'GET',
            data:{start: 1 + $this.limit * (data-1) },
            success:function(data){
              console.log(data);
              $this.$set("records", data.record.records);
              $this.$set("start", data.record.query.start);
              $this.$set("total", data.record.query.total);
              $this.$set("limit", data.record.query.limit);
            }
          })
        }
      },
      jumpTail:function(data){
        var $this = this;
        data = $this.pageNo;
        $this.cur = data;
        if (data == $this.pageNo)
        {
          $this.$set("showTail", false);
        }else
        {
          $this.$set("showTail", true);
        }
        $this.$am.ajax({
          url:window.$ApiConf.api_order_detail_list,
          type:'GET',
          data:{start: 1 + $this.limit * (data-1) },
          success:function(data){
            console.log(data);
            $this.$set("records", data.record.records);
            $this.$set("start", data.record.query.start);
            $this.$set("total", data.record.query.total);
            $this.$set("limit", data.record.query.limit);
          }
        })
        $this.$set("showPre", true);
        return data;
      },
     computed: {
      //*********************分页开始******************************//
      indexs: function(){
        var $this = this;
        var ar = [];

        if ($this.cur > 3)
        {
          ar.push($this.cur - 3);
          ar.push($this.cur - 2);
          ar.push($this.cur - 1);

        }else
        {
          for (var i = 1; i < $this.cur; i++)
          {
            ar.push(i);
          }
        }
        if ($this.cur != $this.pageNo)
        {
          ar.push($this.cur);
        }

        if ( $this.cur < ( $this.pageNo - 3 ) )
        {
          ar.push($this.cur + 1);
          ar.push($this.cur + 2);
          ar.push($this.cur + 3);
          if ( $this.cur < ( $this.pageNo - 4 ) )
          {
            $this.$set("showMoreTail", true);
          }
        }else
        {
          $this.$set("showMoreTail", false);
          for (var i = ($this.cur + 1); i < $this.pageNo; i++)
          {
            ar.push(i);
          }
        }
        return ar;
      }
      //*********************分页结束******************************//
    }
}

JS功能分析:indexs用于记录一共有多少页面

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

Javascript 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
学习ExtJS(二) Button常用方法
Oct 07 Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
js中常用的Math方法总结
Jan 12 #Javascript
Vue数据驱动模拟实现4
Jan 12 #Javascript
移动端点击态处理的三种实现方式
Jan 12 #Javascript
js手机号批量滚动抽奖实现代码
Apr 17 #Javascript
js图片轮播手动切换特效
Jan 12 #Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 #Javascript
JavaScript定义全局对象的方法示例
Jan 12 #Javascript
You might like
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
splice slice区别
2006/10/09 Javascript
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
致跳远运动员广播稿
2014/02/11 职场文书
小学开学标语
2014/07/01 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
idea下配置tomcat避坑详解
2022/04/12 Servers
python数字图像处理之图像的批量处理
2022/06/28 Python