uniapp子组件触发onReachBottom问题?

两个tab切换对应2个组件,一个组件监听onReachBottomOne,一个是onReachBottom,下面这样写是否可以呢,不销毁会执行好几次“加载下一页”

// 主页面
onReachBottom(){
  if(this.tabIndex == 0){
      uni.$emit('onReachBottomOne');
  }else{
      uni.$emit('onReachBottom');
  }
 },
            
// 子组件1
created(){
    uni.$on('onReachBottomOne', () => {
        console.log('加载下一页');
    });
},
beforeDestroy(){
  uni.$off('onReachBottomOne');
},
// 子组件2
created(){
    uni.$on('onReachBottom', () => {
        console.log('加载下一页');
    });
},
beforeDestroy(){
  uni.$off('onReachBottom');
},
阅读 3.2k
2 个回答
// 主页面
data() {
  return {
    isLoading: false
  }
},
onReachBottom(){
  if (this.isLoading) {
    return;
  }
  this.isLoading = true;
  if(this.tabIndex == 0){
      uni.$emit('onReachBottomOne');
  }else{
      uni.$emit('onReachBottom');
  }
},

// 子组件1
created(){
    uni.$on('onReachBottomOne', () => {
        console.log('加载下一页');
        // 数据加载完成后,设置isLoading为false
        this.$parent.isLoading = false;
    });
},
beforeDestroy(){
  uni.$off('onReachBottomOne');
},

// 子组件2
created(){
    uni.$on('onReachBottom', () => {
        console.log('加载下一页');
        // 数据加载完成后,设置isLoading为false
        this.$parent.isLoading = false;
    });
},
beforeDestroy(){
  uni.$off('onReachBottom');
},
onLoad(){
   // 添加监听事件
   uni.$on('onReachBottom', () => {
       console.log('加载下一页')
   });
}
onUnload() {  
   // 移除监听事件  
   uni.$off('onReachBottom');  
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题