当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue实现简易翻页效果源码分享

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

2018年11月26日  | 移动技术网IT编程  | 我要评论

儿童营养不良,未来修理工,丙酮回收

源码如下：

<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实现简易翻页效果源码分享，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网