vue动态分页翻页特效代码下载


vue动态分页翻页特效代码下载
vue动态分页翻页特效代码下载以及动态分页翻页等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/vue.js"></script>

2. HTML代码

  <div id="app">
    <div class="page" v-show="show">
      <div class="pagelist">
        <span class="jump" :class="{disabled:starts}" @click="{current_page--}">上一页</span>
        <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
        <span class="ellipsis" v-show="efont">...</span>
        <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}"
          @click="jumpPage(num)">{{num}}</span>
        <span class="ellipsis" v-show="ebehind">...</span>
        <span v-show="current_page<pages-4" class="jump" @click="jumpPage(pages)">{{pages}}</span>
        <span :class="{disabled:ends}" class="jump" @click="{current_page++}">下一页</span>
        <span class="jumppoint">前往:</span>
        <span class="jumpinp"><input type="text" v-model="changePage"></span>
        <span class="jump gobtn" @click="jumpPage(changePage)">GO</span>
      </div>
      <span class="pageNum">第{{current_page||1}}页/共{{pages}}页</span>
    </div>
  </div>
  <script>
    var newlist = new Vue({
      el: '#app',
      data: {
        current_page: 1, //当前页
        pages: 50, //总页数
        changePage: '', //跳转页
        nowIndex: 0
      },
      computed: {
        // ...是否禁用上一页
        show: function () {
          return this.pages && this.pages != 1
        },
        // 开始
        starts: function () {
          return this.current_page == 1;
        },
        ends: function () {
          return this.current_page == this.pages;
        },
        // ...
        efont: function () {
          if (this.pages <= 7) return false;
          return this.current_page > 5
        },
        // 是否大于7
        ebehind: function () {
          if (this.pages <= 7) return false;
          var nowAy = this.indexs;
          return nowAy[nowAy.length - 1] != this.pages;
        },
        indexs: function () {
          var left = 1,
            right = this.pages,
            ar = [];
          if (this.pages >= 7) {
            if (this.current_page > 5 && this.current_page < this.pages - 4) {
              left = Number(this.current_page) - 2;
              right = Number(this.current_page) + 2;
            } else {
              if (this.current_page <= 5) {
                left = 1;
                right = 7;
              } else {
                right = this.pages;
                left = this.pages - 6;
              }
            }
          }
          while (left <= right) {
            ar.push(left);
            left++;
          }
          return ar;
        },
      },
      methods: {
        jumpPage: function (id) {
          this.current_page = id;
        },
      },
    })
  </script>

相关推荐

发表评论

相关文章