vue- cube-scroll踩坑记

坑：

1. 下拉刷新，上拉加载一直处于加载中  ---  原因：未结束此次下拉或上拉  ---解决：forceUpdate()结束上拉或下拉
2. 无法正常滚动  --- 原因：数据更新了，但页面高度未变化 ---解决：refresh()重新计算高度
3. 上拉加载除了第一次，其他时候失效  --- 原因：上次上拉加载未结束，无法进行下一次下拉 ---解决：forceUpdate()结束上拉或下拉

<!--
 * @Author: lingxie
 * @Date: 2020-06-04 16:17:25
 * @Descripttion:
-->
<template>
  <div class="model-box">
    <div class="page page-order page-order-list">
      <!-- ### 列表 -->
      <div class="order-list-wrapper"  v-if="dataPage && dataPage.length > 0">
        <cube-scroll
          ref="scroll"
          :options="options"
          @pulling-down="onPullingDown"
          @pulling-up="onPullingUp"
        >
          <ul class="order-list">
            <li class="order-item" v-for="(i,idx) in dataPage" :key="idx">
               {{i.orderNo}}
            </li>
          </ul>

        </cube-scroll>
      </div>

      <!--缺省-->
      <div class="noresult" v-else>
        <img src="@order/empty.png" alt="">
        <div>暂无订单</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        pullDownRefresh: {
          txt: "刷新成功"
        },
        pullUpLoad: {
        //   threshold: 100,
          txt: {
            more: "",
            noMore: ""
          }
        }
      },
      page:true,
      pageNo:1,
      pageSize:10,
      totalPage:'',//总页数量
      dataPage: [],
    };
  },
  beforeRouteEnter(to, from, next) {
   next(vm=>{
    vm.pageNo = 1;
    vm.fetch_orderList(1);
   })
  },
  methods: {
    // 触发下拉刷新
    onPullingDown() {
      console.log('下拉刷新--------------');
      this.pageNo = 1;
      this.fetch_orderList(1);
      if(this.$refs && this.$refs.scroll){
          this.$refs.scroll.forceUpdate();
          this.$refs.scroll.refresh();
      }
    },
    // 触发上拉加载更多
    onPullingUp() {
      console.log("上拉加载------------");
      if(this.pageNo >= this.totalPage){
        window.$utils.msg.warn("没有更多数据啦");
        this.$refs.scroll.forceUpdate();
        this.$refs.scroll.refresh();
        return;
      }
      this.pageNo ++ ;
      this.fetch_orderList(0);
    },
    /**
     * @method: fetch_orderList
     * @des: 获取订单
     * @param {isFirst}  是否第一次进入  1：是第一次进入  0：不是
     * @return:
     */
    async fetch_orderList(isFirst) {
      let params ={
        pageNo:this.pageNo,
        isPage:this.page,
        pageSize:this.pageSize,
        queryParams:{
          menuType:""
        }
      };
      let res = await this.$api.uni.listCarOrders(params);

        if (+res.code === 0) {
          var {dataList, total ,totalPage} = res.data;
          // 第一次请求
          if(isFirst){
             this.dataPage = dataList;
             this.total = total;
             this.totalPage = totalPage;
          }else{
            this.$nextTick(()=>{
               console.log('--------------调用加载更多订单数据');
              if(dataList.length > 0){
                console.log(dataList)
                this.dataPage = this.dataPage.concat(dataList);
                this.$refs.scroll.forceUpdate();
              }else{
                this.$refs.scroll.forceUpdate();
                window.$utils.msg.warn('没有更多数据啦！');
              }
              this.$refs.scroll.refresh();
            });
          }
        }
    },

  }
};
</script>
<style lang="less" scoped>
@import url("../../styles/common.less");
.model-box{
  height: 100%;
  background: #ffffff;
  .page-order {
    height: 100%;
  }
}
.page-order-list {
  .order-list-wrapper {
    background: #f6f6f6;
    height: 100%;
    li{
      &:last-child{
        margin-bottom: 0;
      }
    }
  }
  .noresult {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      padding-top: 50%;
      .gray-color;
      img{
        width: 210px;
        height: 115px;
        margin-bottom:30px;
      }
      div{
        font-size: 24px;
        text-align: center;
      }
    }
}
</style>