Vue实现简易翻页效果

作者: 天天要加油 | 来源:发表于2018-11-08 10:18 被阅读0次

Vue实现简易翻页效果
微信浏览器中音频自动播放
Vue 实现简易tab切换效果
vue 书本翻页的效果
07Vue.js实现简易的todolist列表
原生JS实现翻页效果
利用GPU实现翻页效果
iOS实现翻页效果动画
UICollectionView翻页效果实现
09Vue.js实现tab切换效果

源码如下：

<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>

效果如下所示，点击左右能切换页面：

image.png