利用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 相关文章推荐
js 代码优化点滴记录
Feb 19 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
bootstrap table小案例
Oct 21 Javascript
JS重载实现方法分析
Dec 16 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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缓存函数的使用说明
2013/05/10 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
node.js基础知识汇总
2020/08/25 Javascript
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
pycharm快捷键汇总
2020/02/14 Python
QML实现钟表效果
2020/06/02 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
SQL Server面试题
2016/10/17 面试题
关于打架的检讨书
2014/01/17 职场文书
英语专业自荐书
2014/06/13 职场文书
2014年变电站工作总结
2014/12/19 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
记者节感言
2015/08/03 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android