收藏
回答

onPageScroll在安卓和iOS上渲染的不同表现

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 客户端 7.0.4 2.7.0

- 当前 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()
  }
}


最后一次编辑于  2019-05-24
回答关注问题邀请回答
收藏

2 个回答

  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    2019-05-24

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

    2019-05-24
    有用
    回复
  • 长斌
    长斌
    2019-05-24

    自己找了一个妥协的方案

    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组件增加,对页面滑动进度的支持,就省得我在这搞了一个不怎么好的东西出来。

    2019-05-24
    有用
    回复
登录 后发表内容