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 相关文章推荐
JQuery中$之选择器用法介绍
Apr 05 Javascript
html中table数据排序的js代码
Aug 09 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 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
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
PHP中cookie知识点学习
2018/05/06 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
Python去除字符串两端空格的方法
2015/05/21 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
python更改已存在excel文件的方法
2018/05/03 Python
Python get获取页面cookie代码实例
2018/09/12 Python
python事件驱动event实现详解
2018/11/21 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
Python控制Firefox方法总结
2019/06/03 Python
python os.fork() 循环输出方法
2019/08/08 Python
tensorflow自定义激活函数实例
2020/02/04 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
项目开发计划书
2014/01/09 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
中学生检讨书1000字
2014/10/28 职场文书
爱心助学感谢信
2015/01/21 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
员工离职证明范本
2015/06/12 职场文书
九年级化学教学反思
2016/02/22 职场文书