利用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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
使用canvas及js简单生成验证码方法
Apr 02 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 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
ThinkPHP中的三大自动简介
2014/08/22 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
实例讲解Python中的私有属性
2014/08/21 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
python算法题 链表反转详解
2019/07/02 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
C++是不是类型安全的
2014/02/18 面试题
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
土木工程专业本科生求职信
2014/10/01 职场文书
继承公证书格式
2015/01/26 职场文书
预备党员转正意见
2015/06/01 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
详解Python常用的魔法方法
2021/06/03 Python
浅谈python中的多态
2021/06/15 Python
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫
Win10 Anaconda安装python-pcl
2022/04/29 Servers