利用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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
vue 虚拟DOM的原理
Oct 03 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读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
js中的this关键字详解
2013/09/25 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
浅析PHP与Python进行数据交互
2018/05/15 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
Python日志器使用方法及原理解析
2020/09/27 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
音乐教育感言
2014/03/05 职场文书
2014年教师节寄语
2014/04/03 职场文书
小学优秀班主任材料
2014/12/17 职场文书
关于分班的感言
2015/08/04 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python