上一页，下一页的翻页制作`

前言

提示：上一页，下一页的翻页制作

一、逻辑

1、获取数据，存到arrList
2、封装函数getDataList()，把数据存到arrList中
3、编写函数，上一页，下一页；

二、代码

代码如下（示例）：

    //上一页
    btnLeft() {
      if (this.page <= 1) {
        alert("当前是第一页");
        return;
      } else {
        this.page--;
        this.getData();
      }
	  this.scrTop();
    },

    //下一页
    btnRit() {
      if (this.listArr.length < 9 || this.listArr.length == 0) {
        //一页数据显示9条，获取数据不够9条，不需要翻页；没有数据也不需要翻页
        return;
      } else {
        this.page++;
        this.getData();
      }
	  this.scrTop();
    },
    //获取列表请求
    getData() {
      axios({
        url: "https://ku.qingnian8.com/dataApi/blog/showBlog.php",
        params: {
          page: this.page,
          num: 9
        }
      }).then(res => {
        this.listArr = res.data;
        console.log(this.listArr);
      });
    },
		//返回顶部的函数
		scrTop(){
			if(document.body.scrollTop){
				document.body.scrollTop=0;
			}else{
				document.documentElement.scrollTop=0;
			}
		}
  }

总结

注意：上一页和下一页在翻页的时候，做细节处理，判断当前页是否为首页等。

//翻页后返回到顶部，两种写法都可以，看浏览器兼不兼容。
	  document.body.scrollTop=0;
      document.documentElement.scrollTop=0;//谷歌