- 当前 Bug 的表现(可附上截图)
页面无法触发[onReachBottom()] 或者 scroll-view的[bindscrolltolower]
当前的页面结构使用了swiper和scroll-view组件,结构如下:
<topbar><topbar>
<swiper>
<swiper-item>
<scroll-view bindscrolltolower=尝试绑定触底监听>
可下拉刷新,上拉加载的内容区域
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view>
可下拉刷新,上拉加载的内容区域
</scroll-view>
</swiper-item>
...
</swiper>
<footernavbar><footernavbar>
- 预期表现
页面三段式布局,顶部、底部fixed固定;
中间填充满屏幕,内容区域swiper切换,且超过高度触发下拉刷新,上拉加载;
为了更好体验保留自带的下拉刷新,也能正常触发。
- 复现路径
默认状态:
下拉状态:(能够正常触发下拉刷新)
上拉加载状态:(无法触发默认的onReachBottom,也无法触发scroll-view的bindscrolltolower)
- 提供一个最简复现 Demo
提供了代码片段,可上拉复现
那上拉加载呢 我这边 因为中间固定了100% 导致 onReachBottom不执行了,你这个可以执行吗
解决办法:
swipe中内容
//wxml
<view
bind:touchmove="TTouchmove"
class="jscroll-view-pull-component">
列表内容区域
<!--
scroll[watcher]
-->
<view id="watcher-pullup"></view>
</view>
//js
/**
* ------------------------------------------------------------------
* @monitor
* TTouchmove
*
* 组件滑动监听
* ------------------------------------------------------------------
*/
TTouchmove: function(e) {
let _this = this;
let gap = _this.data.GAPBOTTOM;
/**
* ------------------------------------------------------------------
* 监听loader
* _ReachBottom
* ------------------------------------------------------------------
*/
// system infos
let sys = _this.data.systemInfo;
let windowHeight = sys.windowHeight;
// query ob
let query = wx.createSelectorQuery().in(_this);
let nodeId = '#watcher-pullup';
query.select(nodeId).boundingClientRect()
query.exec(function(res){
if (res[0].top <= windowHeight + gap) {
// load data
_this._loadData();
}
});
},
你好请问怎解决的
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
您好:
去掉scroll-view使用自带下拉上拉
页面头尾固定,中间内容是swiper,且可y方向上滚动,
去掉scroll-view组件,后再实现:
这种情况下要实现下拉,可以直接调用到onPullDownRefresh,
在实现上拉加载时,调用onReachBottom也调用不到。
这种情况下如何处理呢?