不通过组件实现移动端项目分页（分页含省略号，上下页，动态展示数据，附效果图）

 

 

 

 

 代码部分：

<div class="news_bottom">
      <div class="count">
        <ul>  
           <!-- 上一页下一页都写了两个，没有在下面作相应的判断，也可以在下面方法中判断
                页码小于等于1，上一页按钮不可点击，页码大于等于页码数下一页不可点击-->
          <li v-show="currentPage != 1" @click="pageClick(0)">
            <div class="pic" ></div>
          </li>
          <li v-show="currentPage == 1">
            <div class="pic"></div>
          </li>
            <!-- 思路：5个最基本的是12345，比较多的可以直接用组件；然后进行相应判断就可以了 -->
          <li :class="{ active: currentPage == 1 }" @click="onClick(1)">1</li>
          <li
            v-show="(currentPage <= 3 && pageCount > 2) || pageCount <= 5"
            :class="{ active: currentPage == 2 }"
            @click="onClick(2)">
              2
            </li>
          <li
            v-show="(currentPage <= 3 && pageCount > 3) || pageCount <= 5"
            :class="{ active: currentPage == 3 }"
            @click="onClick(3)">
            3
          </li>
          <li v-if="pageCount > 5" @click="omitClick()">
            <span>...</span>
          </li>
          <li
            v-show="currentPage && currentPage > 3 &&currentPage < pageCount - 2 
                    && pageCount > 5"
            :class="{ active: currentPage }"
            @click="onClick(currentPage)">
            {{ currentPage }}
          </li>
          <li @click="pageClick(1)"
            v-if="
              pageCount > 5 &&
              currentPage &&
              currentPage > 3 &&
              currentPage < pageCount - 2" >
            <span>...</span>
          </li>
          <li
            v-show="currentPage >= pageCount - 2 && pageCount > 4 && pageCount > 5"
            :class="{ active: currentPage == pageCount - 2 }"
            @click="onClick(pageCount - 2)">
            {{ pageCount - 2 }}
          </li>
          <li
            v-show="
              (currentPage >= pageCount - 2 && pageCount > 4) || pageCount == 5
            "
            :class="{ active: currentPage == pageCount - 1 }"
            @click="onClick(pageCount - 1)" >
            {{ pageCount - 1 }}
          </li>
          <li
            :class="{ active: currentPage == pageCount }"
            v-show="pageCount > 1"
            @click="onClick(pageCount)">
            {{ pageCount }}
          </li>
          <li v-show="currentPage < pageCount" @click="pageClick(1)">
            <div class="pic" ></div>
          </li>
          <li v-show="currentPage >= pageCount"><div class="pic"></div></li>
        </ul>
      </div>
      <div class="total">
        {{ size }}条/页
        <div class="down" @click="dropShow = !dropShow"></div>
      </div>
      <ul class="drop" v-show="dropShow">
        <li
          v-for="item in numArr"
          :key="item.id"
          @click="totalClick(item.num)"
          :class="{ active: item.num == size }">
          {{ item.num }}条/页
        </li>
      </ul>
      <span>共{{ total }}条</span>
   </div>

 

<script>
import { newsList } from "@/api/news"; //数据
export default {
  data() {
    return {
      pageCount:null,  //总共页数
      currentPage: 1,  //当前页码
      size:30,         //每页数据条数
      total:0,       //总共数据量
      dropShow: false,  //多少条每页是否显示
      numArr: [          //num条每页，自己可以设置
        {
          num: 10,
        },
        {
          num: 20,
        },
        {
          num: 30,
        },
        {
          num: 40,
        },
      ],
    };
  },
  /*
  mounted(){
//这是用于数据写死的情况下
    this.pageCount = Math.ceil(this.total / this.size); 
//如果是调数据可以在调用成功时用这个
  },  Math.ceil()是向上取整  2.3 = 3
  **/
  created() {
    this.getList();
  },
  methods: {
      //上一页以及下一页按钮的点击事件  也可以实现跳多页 0：上一页，1：下一页
    pageClick(val) { 
      if (val == 0) {
        this.currentPage = this.currentPage - 1;
      }
      if (val == 1) {
        this.currentPage = this.currentPage + 1;
      }
       window.scrollTo(0, 0);  //执行完跳转到顶部
    },
      //点击分页按钮时跳转相应页面，可以用当前页码的值控制相应的数据值
    onClick(val){
      this.currentPage = val;
      this.getList();
      window.scrollTo(0, 0);
    }
      //第一个冒号点击  第二个冒号等于下一页
      omitClick(){
      if(this.currentPage <= 3){
        this.currentPage = this.currentPage + 1;
      }else{
        this.currentPage = this.currentPage - 1;
      }
      window.scrollTo(0, 0);  //执行完跳转到顶部
    },
       //下拉框点击事件  
     totalClick(val) { //val就是上面传的item.num 
      console.log(val);
      this.size = val;
      this.dropShow = false; //关闭下拉框
      // this.size = event.target.value;
      this.getList();
    },
        //获取数据
      getList() {
         //获取相应数据
      newsList(data).then((res) => {
        // console.log(res);
        this.total = res.data.pageList.total;
        this.currentPage = res.data.pageList.current;
        this.size = res.data.pageList.size;
        this.pageCount = Math.ceil(this.total / this.size); //计算总共多少页
        this.dropShow = false; //数据改变下拉框自动消失
      });
    },
  },
};
</script>

<style>
/* count是前面12345以及上一页下一页部分 */
.count {
  display: inline-block;
  width: 415px;
  padding-bottom: 98px;
  padding-left: 54px;
}
.count > ul > li {
  position: relative;
  box-sizing: border-box;
  float: left;
  width: 47px;
  height: 47px;
  margin-right: 13px;
  text-align: center;
  line-height: 47px;
  border: solid 1px #e5e5e5;
  font-size: 21px;
  color: #6d717e;
}
.count > ul > .active {
  color: #538af8;
  background-color: #e0eafe;
  border: 0;
}
.count > ul > li > .pic {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 12px;
}
.count > ul > li:nth-last-child(-n + 2) {
  margin-right: 0;
}
.count > ul > li:nth-child(-n + 2) .pic {
  background: url("../../assets/news/left.png") no-repeat;
  background-size: 100% 100%;
}
.count > ul > li:nth-last-child(-n + 2) .pic {
  background: url("../../assets/news/right.png") no-repeat;
  background-size: 100% 100%;
}
/* total 设置的是多少条每页的类名 */
.news_bottom > .total {
  position: absolute;
  box-sizing: border-box;
  left: 455px;
  display: inline-block;
  width: 137px;
  height: 47px;
  border: solid 1px #e5e5e5;
  font-size: 21px;
  color: #6d717e;
  text-align: center;
  line-height: 47px;
  margin-left: 18px;
}
.news_bottom > .total > .down {
  display: inline-block;
  width: 12px;
  height: 10px;
  background: url("../../assets/news/down.png") no-repeat;
  background-size: 100% 100%;
}
/* drop 是下拉框的类名 */
.news_bottom > .drop {
  position: absolute;
  width: 135px;
  font-size: 21px;
  line-height: 47px;
  color: #6d717e;
  text-align: center;
  box-sizing: border-box;
  top: 50px;
  left: 475px;
  background: #fff;
  border: solid 1px #e5e5e5;
}
.news_bottom > .drop > li {
  height: 50px;
}
/* span也就是最后的共多少条 */
.news_bottom > span {
  position: absolute;
  top: 13px;
  left: 620px;
  font-size: 21px;
  color: #6d717e;
}
/* 选中的下拉框的相应样式 */
.active {
  background: #ddd;
}
</style>