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 相关文章推荐
文本加密解密
Jun 23 Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
json数据的列循环示例
Sep 06 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 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
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
使用python实现省市三级菜单效果
2016/01/20 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
毕业生实习鉴定
2013/12/11 职场文书
规划编制实施方案
2014/03/15 职场文书
出国英文推荐信
2014/05/10 职场文书
初中生毕业评语
2014/12/29 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
php字符串倒叙
2021/04/01 PHP