收藏
回答

单个页面 多个scroll-view实现自动分页引发问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug scroll-view 客户端 6.7.2 2.2.3


单个页面上有两个scroll-view,其中一个隐藏,在开发版手机中快速滑动bindscroll得到的scrollTop是乱的,如下图,做的操作是一直在下滑,但是拿到的scrolltop却一直在跳转。

只有快速滑动时会出现问题,如果手一直放在手机上慢慢滑动则出现概率减小,但是还是会出现。

上述问题在开发工具中并不会重现。

使用了wepy框架,

打印日志代码

hubScroll(e) {

if (e.detail.scrollTop > 150 && this.hubView.returnTopFlag) {

console.log('scrollTop (set false): ', e.detail.scrollTop)

this.hubView.returnTopFlag = false

} else if (e.detail.scrollTop < 100 && !this.hubView.returnTopFlag) {

console.log('scrollTop (set true): ', e.detail.scrollTop)

this.hubView.returnTopFlag = true

}

}


没有再设置值后调用apply方法更新页面,且所有apply之前都加了console.log('触发了X'),但是都没有打印出,所有排除由于刷新页面导致scrollTop的值刷新为原始值:

hubView: {

hubScrollTop: 1,

hubScrollHeight: (wx.getStorageSync(SYSTEM_INFO).windowHeight * wx.getStorageSync(SYSTEM_INFO).pixelRatio) - 100,

returnTopFlag: true

}


returnTopFlag为false,显示出回到顶部的触发图片,下面是触发方法:

// 接口 点击返回列表顶部

hubreturnTopClick(e) {

if (this.hubView.hubScrollTop === 0) {

this.hubView.hubScrollTop = 1

} else {

this.hubView.hubScrollTop = 0

}

console.log('触发了2')

this.$apply()

},


同样的用法在其他页面是有效的,且没有问题,但是当前页面有两个scroll-view(当然对于控制的参数肯定全部分开了)。另一个的控制参数:

commentView: {

hubScrollTop: 1,

hubScrollHeight: (wx.getStorageSync(SYSTEM_INFO).windowHeight * wx.getStorageSync(SYSTEM_INFO).pixelRatio) - 290,

returnTopFlag: true

}

日志输出:


回答关注问题邀请回答
收藏
登录 后发表内容