onPageScroll在安卓和iOS上渲染的不同表现
发布于 6 年前 作者 jing37 3838 次浏览 来自 问答
  • 当前 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()
  }
}
2 回复

你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），卡顿的表现最好能提供下复现的视频

自己找了一个妥协的方案

updateProgress: function (st) {
  var h = this.data.pageHeight
  var t = new Date().getTime()
  if (h > 0 && st > 100) {
    if (this.data.platform == 0 || t - this.data.timestamp > 400) {
      var p = 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手机上都可以接受。

同时，设置进度条动画

<progress active="true" active-mode="forwards" activeColor="#57b4fc" percent="{{percent}}" />

这样，虽然两次变化中间间隔200毫秒，但是有动画补足，看起来还算连贯，不会显得特别卡顿。

当然，我这是阅读进度条，对实时性要求没有贴顶的那么高，还可以吧。

如果官方能在progress组件增加，对页面滑动进度的支持，就省得我在这搞了一个不怎么好的东西出来。

回到顶部