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

碰到的问题是如果将孙子组件单独拿出来是能滚动加载数据的,但是如果父组件存在切换的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没有达到触底的条件,所以不会触发 ?

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

入门微信小程序(含实战) [第九篇] -- 下拉刷新和上拉加载
下拉刷新和上拉加载是两个独立又密切联系的功能,上拉加载需要服务器端有分页机制,而下拉刷新除了重新获取信息外还要对之前的状态和页码进行初始化. 一个一个来吧. 服务器端分页其实yii2早就已经为我们准 ...
【微信小程序】实现下拉刷新和上拉触底加载更多数据的页面事件
1.下拉刷新事件 1. 什么是下拉刷新下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为 2. 启用下拉刷新启用下拉刷新有两种方式: ① 全局开启下拉刷新 ...
微信小程序onPullDownRefresh onReachBottom实现下拉刷新上拉分页加载
样式基于weui 首先需要配置页面的json文件,启用下拉刷新 {"enablePullDownRefresh": true } 在WXML里,通过列表渲染即可显示数据 <v ...
解决微信小程序textarea层级太高遮挡其他组件的问题
解决微信小程序textarea层级太高遮挡其他组件的问题参考文章: (1)解决微信小程序textarea层级太高遮挡其他组件的问题 (2)https://www.cnblogs.com/pansid ...
微信小程序echarts层级太高
项目中因为需求,底部的tab导航栏是自己写的,在开发者工具中一切正常:但是在真机上页面滑动时,echarts的层级比tab高,调过两者的z-index后仍然如此. 经过查找后发现cover-view和 ...
微信小程序四种父子相互传值方式
微信小程序四种父子相互传值方式 1. 绑定自定义属性(父传子),触发自定义方法 (子传父) 原生微信小程序+uni-app都可以实现父组件: <template><view cla ...
微信小程序把玩（二十八）image组件
原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...
微信小程序把玩（二十六）navigator组件
微信小程序把玩(二十六)navigator组件原文:微信小程序把玩(二十六)navigator组件 navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指 ...
微信小程序：意见反馈制作（1）（可加图片）
微信小程序:意见反馈制作(可加图片) 不同类型的微信小程序可能需要不同的意见反馈样式,仅以我做的为例,具体样式可自行修改 1.小程序自带意见反馈(非常简单) <button open-type= ...

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

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

最新文章

热门文章