如何在有顶部自定义导航tab的页面实现下拉刷新和上拉加载?
发布于 6 年前 作者 yang76 13295 次浏览 来自 官方Issues

单独设置下拉刷新和上拉加载我都会。

// xxx.json
{
  "enablePullDownRefresh": true, //下拉刷新
  "onReachBottomDistance": 50, //上拉加载
}

但是当某个页面顶部有自定义tab时,要同时做到这两个,会有一点点小问题。

https://developers.weixin.qq.com/s/Iion6nmc70eL

因为对顶部导航header-tabbar组件用了position: fixed;所以下拉时它还是固定在顶部,然后如上图,效果不太好。

如果把header-tabbar用position: absolute;那么页面上拉的时候它又不固定在顶部了,不符合正常交互习惯。

如果即要position: absolute; 又要将其固定在顶部,也可以将下面的容器(view class"order-wrapper...>...</view>)固定高度为height: 100%, overflow: auto;但是上拉加载就没效果了;也不知道怎么监听scroll事件判断到底部了;用scroll-view做容器的话下拉刷新又失效了。。。真的崩溃

这问题困扰好几天了,不知道有没有解决办法,谢谢各位。

然后我发现腾讯体育小程序里有个场景实现很符合我的要求:“社区”页面,不知道怎么实现的

回到顶部