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 相关文章推荐
js电信网通双线自动选择技巧
Nov 18 Javascript
起点页面传值js,有空研究学习下
Jan 25 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
玩转方法:call和apply
May 08 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 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
对Session和Cookie的区分与解释
2007/03/16 PHP
PHP使用数组实现队列
2012/02/05 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
Python使用re模块验证危险字符
2020/05/21 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
中学生在校期间的自我评价分享
2013/11/13 职场文书
采购员的工作职责
2013/12/26 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
教师党员整改措施
2014/10/24 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
冰峪沟导游词
2015/02/09 职场文书
研究生个人学年总结
2015/02/14 职场文书