- 当前 Bug 的表现（可附上截图）
想在文章阅读页，加上一个顶部阅读进度条。使用onPageScroll实时判断滚动条距离，然后得出进度比例。
但是，iOS渲染正常，安卓就很卡顿，有几秒的延迟，在社区寻找解决方案，发现：
{ "usingComponents": {}} |
配置加上这个，安卓就正常了，但是iOS又开始卡顿。
- 预期表现
希望有办法可以同时iOS和安卓都能onPageScroll实时渲染
- 复现路径
- 提供一个最简复现 Demo
<view class="read-progress" hidden="{{hideProgress}}"> <progress stroke-width="6" activeColor="#57b4fc" percent="{{percent}}" /></view><view class="container" id="topic-detail"></view> |
onPageScroll: function (e) { this.updateViewHeight() this.updateProgress(e.scrollTop)},updateProgress: function (st) { var h = this.data.pageHeight if (h > 0 && st > 100) { var p = Math.floor(100 * (st - 100) / (h - 850)) this.setData({ hideProgress: false, percent: p }) } else { this.setData({ hideProgress: true }) }},updateViewHeight: function () { if (this.data.pageHeight === 0) { var that = this var query = wx.createSelectorQuery() query.select('#topic-detail').boundingClientRect(function (res) { that.setData({ pageHeight: res.height }) }).exec() }} |
自己找了一个妥协的方案
updateProgress:function(st) {varh =this.data.pageHeightvart =newDate().getTime()if(h > 0 && st > 100) {if(this.data.platform == 0 || t -this.data.timestamp > 400) {varp = Math.floor(100 * (st - 100) / (h - 850))this.setData({hideProgress:false,percent: p,timestamp: t})}}else{if(this.data.hideProgress ==false) {this.setData({hideProgress:true})}}}添加一个时间戳，我根据多次测试，200毫秒setData一次，流畅程度在我安卓和iOS手机上都可以接受。
同时，设置进度条动画
<progressactive="true"active-mode="forwards"activeColor="#57b4fc"percent="{{percent}}"/>这样，虽然两次变化中间间隔200毫秒，但是有动画补足，看起来还算连贯，不会显得特别卡顿。
当然，我这是阅读进度条，对实时性要求没有贴顶的那么高，还可以吧。
如果官方能在progress组件增加，对页面滑动进度的支持，就省得我在这搞了一个不怎么好的东西出来。
你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），卡顿的表现最好能提供下复现的视频