实现手写分页效果

又菜又不想学的小张

已于 2023-10-08 14:17:41 修改

阅读量103

点赞数

文章标签： vue.js 前端 javascript

于 2023-10-08 14:15:44 首次发布

本文链接：https://blog.csdn.net/qq_45108358/article/details/133680560

版权

背景：官网上的分页不能使用组件，因为要跳转的必须是a链接，方便抓取到链接，提高SEO
在这里插入图片描述

  <main id="main">
    <ul class="ul">
      <li class="li" @click="toPath(item)" v-for="(item,index) in pages" :key="index">{{item}}</li>
    </ul>
  </main>

  let vm=new Vue({
   el:'#main',
   data:{
    count:100,
    limit:9,//每一页展示多少个
    page:1,
    allPage:0,
   },
   
   methods:{
    toPath(currentPage){
      if(currentPage=='...') return
      this.page=currentPage
    }
   },
   created(){
    console.log(this.pages);
   },
   computed:{
    pages() {
      this.allPage = Math.ceil(this.count / this.limit)
      let n = this.page
      let total = this.allPage
      if (total < 10) {
        let result = [];
        for (let i = 1; i <= total; i++) {
          result.push(i);
        }
        return result;
      }
      if(n<=5){
        return [1,2,3,4,5,6,'...',total]
      }else if(n>=total-5){
        return [1,'...',total-6,total-5,total-4,total-3,total-2,total-1,total]
      }else{
        return [1,'...',n-2,n-1,n,n+1,n+2,'...',total]
      }
    }
   }
  })
</script>

<style>
  ul{
    display: flex;
    margin-top: 80px;
  }
 ul li{
  width: 80px;
  height: 80px;
  background: #fff;
  color: #000;
  text-align: center;
  line-height: 80px;
  font-size: 25px;
  margin-left: 20px;
 }
</style>