Vue实现简易翻页效果源码分享


Posted in Javascript onNovember 08, 2018

源码如下:

<html>
<head>  <meta charset="UTF-8">
  <title>slidePage</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <style type="text/css">
   *{
     margin: 0;
     padding: 0;
   }
   .container {
     width: 100%;
     margin: 0 auto;
     text-align: center;
   }
   .content{
     font-size: 400px
   }
   .leftBtn{
     width: 45px;
     height: 45px;
     margin-right: 15px;
   }
   .rightBtn{
     width: 45px;
     height: 45px;
     margin-left: 15px;
   }
  </style>
</head>
<body>
<div id='root'>
  <div v-if="numberArr.length == 0">{{showMessage}}</div>
  <div class="container" v-for="(item, index) in getCurPageContent(numberArr, curPage, itemNumPerPage)" :key="index">
   <div class="content">{{item}}</div>
   <div class="pageButtonList">
     <button class="leftBtn" @click="handleClick('leftBtn')"><</button>
     <span class="pagination">{{curPage}}/{{totalPage}}</span>
     <button class="rightBtn" @click="handleClick('rightBtn')">></button>
   </div>
  </div>
</div>
<script>
  new Vue({
    el: "#root",
    data(){
      return {
        showMessage: 'No number',
        content:'',
        numberArr: [1, 2, 3, 4],
        curPage: 1,
        totalPage: 1,
        itemNumPerPage: 1
      }
    },
    mounted() {
      this.init()
    },
    methods:{
      init(){
        this.totalPage = Math.ceil(this.numberArr.length / this.itemNumPerPage)
        this.totalPage = this.totalPage < 1 ? 1 : this.totalPage
      },
      getCurPageContent: function(numberArr, curPage, itemNumPerPage){
        return numberArr.filter(function(element, index){
          if(index >= (curPage -1)* itemNumPerPage && index < curPage *itemNumPerPage){
            return true
          }else{
            return false
          }
        })
      },
      handleClick: function(arg){
        if(arg == 'leftBtn'){
          this.curPage = this.curPage > 1 ? --this.curPage : this.totalPage
        }else if (arg == 'rightBtn'){
          this.curPage = this.curPage < this.totalPage ? ++this.curPage: 1
        }
      }
      // handleLeftClick: function(){
      //   if(this.curPage > 1){
      //     this.curPage --
      //   }else{
      //     this.curPage = this.totalPage
      //   }
      // },
      // handleRightClick: function(){
      //   if(this.curPage < this.totalPage){
      //     this.curPage ++
      //   }else{
      //     this.curPage = 1
      //   }
      // }
    }
  })
</script>
</body>
</html>

效果如下所示,点击左右能切换页面:

Vue实现简易翻页效果源码分享

总结

以上所述是小编给大家介绍的Vue实现简易翻页效果源码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
js实现导航跟随效果
Nov 17 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
js尾调用优化的实现
May 23 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 #Javascript
详解如何创建并发布一个 vue 组件
Nov 08 #Javascript
webpack开发环境和生产环境的深入理解
Nov 08 #Javascript
webpack 开发和生产并行设置的方法
Nov 08 #Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 #Javascript
深入解析ES6中的promise
Nov 08 #Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 #Javascript
You might like
收音机术语解释
2021/03/01 无线电
php上的memcache和memcached两个pecl库
2010/03/29 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
php获取淘宝分类id示例
2014/01/16 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
Python实现的几个常用排序算法实例
2014/06/16 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
上班打牌检讨书
2014/02/07 职场文书
同学聚会通知书
2015/04/20 职场文书
在职证明书模板
2015/06/15 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript