uniapp子组件触发onReachBottom问题？

  • Z时代
  • 2024-02-22
  • 分类：IT

两个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');
},

回答：

// 主页面
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');  
}

以上是 uniapp子组件触发onReachBottom问题？ 的全部内容， 来源链接： utcz.com/p/934342.html

回到顶部