企业官网建设流程全解析

海外广告投放是干嘛的,seo移动网站页面怎么做,企业网站形象建设,godaddy备份wordpressuniapp踩坑-组件嵌套子组件不触发onReachBottom事件在 uni-app 开发中#xff0c;相信很多人都遇到过这样的问题#xff1a;页面嵌套了多层组件后#xff0c;在子组件里定义的onReachBottom触底事件完全不生效#xff0c;明明滚动到了页面底部#xff0c;却始终没有触发预…uniapp踩坑-组件嵌套子组件不触发onReachBottom事件在 uni-app 开发中相信很多人都遇到过这样的问题页面嵌套了多层组件后在子组件里定义的onReachBottom触底事件完全不生效明明滚动到了页面底部却始终没有触发预期的逻辑。今天就来跟大家聊聊这个问题的核心原因以及几种简单又实用的解决方法帮大家彻底踩平这个坑一、先搞懂为什么子组件的 onReachBottom 不生效想要解决问题首先要明白问题的本质。uni-app 中的onReachBottom并不是一个普通的事件而是页面级的生命周期钩子它有两个关键的特性1.作用域限制onReachBottom仅在pages.json中注册的页面根组件也就是pages/xxx/xxx.vue文件中生效。子组件无论是局部组件、全局组件还是嵌套多层的组件直接定义这个钩子框架根本不会识别。2.滚动容器的阻断如果页面中使用了scroll-view、swiper、listApp 端等自定义滚动容器且这些容器占满了页面高度页面的原生滚动会被覆盖此时页面的onReachBottom也会因为滚动事件被容器捕获而无法触发。3.简单来说**onReachBottom是页面的 “专属事件”子组件没权限直接用如果有自定义滚动容器还会进一步阻断这个事件。**二、对症下药三种场景的解决方案针对不同的业务场景我们有对应的解决思路大家可以按需选择。场景 1无自定义滚动容器子组件需响应页面触底这种场景是最常见的比如页面根组件嵌套了一个列表子组件想要在滚动到底部时让子组件执行加载更多的逻辑。核心思路**由页面根组件接收onReachBottom事件再通过 “通信” 通知子组件执行对应逻辑**。这里推荐两种实现方式方式 1父组件通过 Ref 调用子组件方法推荐易维护这是最直观、也最容易维护的方式适合组件嵌套层级不深的场景。步骤 1页面根组件pages/xxx/xxx.vuetemplate view classpage-container !-- 引入子组件并绑定ref -- child-list refchildListRef/child-list /view /template script setup import ChildList from /components/ChildList.vue; import { ref } from vue; // 定义子组件的引用 const childListRef ref(null); // 页面根组件的触底事件这是唯一会生效的onReachBottom const onReachBottom () { console.log(页面触底了通知子组件执行逻辑); // 调用子组件暴露的方法 childListRef.value.handleReachBottom(); }; /script步骤 2子组件components/ChildList.vue template view v-foritem in list :keyitem.id classlist-item {{ item.name }} /view /template script setup import { ref } from vue; // 模拟列表数据 const list ref(Array.from({ length: 20 }, (_, i) ({ id: i, name: 列表项${i1} }))); // 定义触底后的处理逻辑 const handleReachBottom () { console.log(子组件接收到触底事件开始加载更多); // 这里写加载更多的业务逻辑 setTimeout(() { const newData Array.from({ length: 10 }, (_, i) ({ id: list.value.length i, name: 新加载项${i1} })); list.value.push(...newData); }, 500); }; // 暴露方法给父组件调用关键 defineExpose({ handleReachBottom }); /script方式 2使用全局事件总线适合跨多层组件如果组件嵌套层级很深比如爷爷组件→父组件→子组件用 Ref 调用会比较繁琐这时可以用 uni-app 内置的全局事件总线uni.emit。步骤 1页面根组件script setup // 页面触底事件 const onReachBottom () { // 触发全局事件 uni.$emit(pageReachBottom); }; /scriptscript setup import { onMounted, onUnmounted } from vue; // 监听全局事件 onMounted(() { uni.$on(pageReachBottom, handleReachBottom); }); // 销毁事件监听避免内存泄漏关键 onUnmounted(() { uni.$off(pageReachBottom, handleReachBottom); }); // 触底处理逻辑 const handleReachBottom () { console.log(子组件通过全局事件接收到触底通知); // 加载更多逻辑... }; /script场景 2页面中有 scroll-view 等自定义滚动容器如果页面使用了scroll-view作为滚动容器比如需要实现下拉刷新、自定义滚动条页面的原生滚动会被覆盖此时onReachBottom完全失效需要改用scroll-view的专属事件。核心思路**监听 scroll-view 的scrolltolower事件触底事件**。template !-- 必须设置scroll-y且给固定高度如100vh -- scroll-view scroll-y styleheight: 100vh; scrolltolowerhandleScrollToLower lower-threshold50 !-- 距离底部50px时触发可自定义 -- !-- 滚动内容 -- child-list/child-list /scroll-view /template script setup const handleScrollToLower () { console.log(scroll-view触底了); // 直接调用子组件方法或触发全局事件通知子组件 }; /script 如果scroll-view在子组件内部直接在子组件里监听scrolltolower即可更直接。场景 3样式问题导致的滚动失效还有一种容易被忽略的情况页面本身的样式设置导致无法滚动进而让onReachBottom不触发。需要检查并修复这些样式问题1.移除page或根容器的overflow: hidden会阻断页面滚动2.将height: 100%改为min-height: 100%避免内容不足时无法滚动3.确保页面内容高度超过视口高度否则不会触发触底。三、额外小技巧让触底事件更丝滑1.调整触底距离在pages.json中可以配置onReachBottomDistance默认 50px可根据需求调整{ pages: [ { path: pages/index/index, style: { onReachBottomDistance: 100 } } ] }避免多层滚动嵌套尽量不要在scroll-view里再套scroll-view否则会导致事件触发异常四、总结其实解决子组件onReachBottom不触发的问题核心就三句话1.**子组件不能直接用onReachBottom让页面根组件来接收**2.通过 Ref 调用或全局事件把触底通知传给子组件3.**有 scroll-view 就用scrolltolower别再纠结onReachBottom**。4.希望这篇分享能帮到正在踩坑的同学