数据分页思路

一、数据分页思路

1. 先声明一个属性是否有更多数据，hasMore = true
2. 在触底后根据hasMore的状态来判断，为真继续加上skip += limit然后发送请求。。
3. 在请求中判断剩余数据的长度是否为0，res.res.vertical.length === 0 为真 改变 hasMore的状态为false,并且返回不在执行下面的代码
4. 还有如果有固定数据，需要判断本地this.recommend.length === 0某个数据的长度是否为0，为0 才发送第一次请求，后面请求后改变了数据的长度就不用在执行这段重复代码了

代码展示： 以vue 为实例

<scroll-view @scrolltolower="lower" scroll-y="true" style="height: 1000px" class="recommend-view"  v-if="recommend.length>0">
</scroll-view>

      //推荐列表
      recommend: [],
      //月份模块
      monthes: {},
      hots: [],
      params: {
        limit: 30,
        order: "hot",
        skip: 0
      },
      hasMore: true

  mounted() {
    this.getList();
  },
  methods: {
    //滚动条触底条件
    lower() {
      //根据状态判断是否继续发送请求
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "没有更多图片了",
          icon: "none"
        });
      }

    },

    getList() {
      this.request({
        url: "http://service.picasso.adesk.com/v3/homepage/vertical",
        data: this.params
      })
        .then(res => {
          //优化判断是否还有数据，没有数据就改变状态
          if (res.res.vertical.length === 0) {
            this.hasMore = false;
            return; //返回不再继续执行
          }
          if (this.recommend.length === 0) {
            //推荐数据
            this.recommend = res.res.homepage[1].items;
            //月份数据
            this.monthes = res.res.homepage[2];
            this.monthes.MM = moment(this.monthes.stime).format("MM");
            this.monthes.DD = moment(this.monthes.stime).format("DD");
          }
          //热门数据，加上继续请求得到的res.res.vertical，并展开合并为全部数据
          this.hots = [...this.hots, ...res.res.vertical];
        });
    }


  }