每日三思:微信小程序多层级父子组件如何在子组件滚动加载

碰到的问题是如果将孙子组件单独拿出来是能滚动加载数据的,但是如果父组件存在切换的tab,子组件也存在tab切换,子组件就无法滚动加载数据

示意图

代码结构

刚开始的处理思路

在子组件中使用滚动加载,但是无法触发事件,另在测试的时候,发现只是触发了父级的滚动加载事件.就想到了利用父级的滚动加载事件和tab切换事件协调统一起来,通过父级事件调用子组件的滚动加载

优化过的思路

父组件调用子组件的滚动加载事件

onReachBottom(){
  this.$broadcast('reOnReachBottom')
}

子组件事件

events={
reOnReachBottom(){
    let {list, listTotal} = this;
    if(list.length < listTotal){
      this.params.pageNo += 1;
      this.$apply();
      this.getDtl().then(res => {
        this.ordDtllCB(res);
      });
    }
  },
}

另中间测试的过程中还碰到过白痴的问题,滚动加载是触底才出发,数据条数为1条的分页条件时,item没有达到触底的条件,所以不会触发 ?