收藏
回答

在onPageScroll监听,到达某个位置置顶,ios真机测试延迟?

onPageScroll监听页面,滑动到某位置置顶元素,但是ios真机测试时滑的很快,会延迟好几秒才置顶?可否改善?有替代方法吗?

以下是代码片段:

https://developers.weixin.qq.com/s/u1xqBCmZ7qaQ

回答关注问题邀请回答
收藏

5 个回答

  • 小小小强
    小小小强
    2019-08-15

    不要在onPageScroll函数中频繁调用setData,非常耗性能的。

    吸顶效果可以使用样式 position: sticky ; top: 0;

    你只需要保证你需要实现吸顶效果的元素是page的子元素就行了


    2019-08-15
    有用 1
    回复 24
    • 你好耀眼。
      你好耀眼。
      2019-08-15
      可是需要一边上滑一遍切换导航呢
      2019-08-15
      回复
    • 小小小强
      小小小强
      2019-08-15回复你好耀眼。
      吸顶效果还是使用position: sticky ; top: 0; 切换导航的setData之前加一个判断,如果当前导航和目标导航相同就不执行setData,如果不同就执行setData
      2019-08-15
      回复
    • 小小小强
      小小小强
      2019-08-15回复你好耀眼。
      我之前也是遇到和你类似的问题,我后来改了需求,把一直换下滑切换导航改成的tab切换
      2019-08-15
      回复
    • 你好耀眼。
      你好耀眼。
      2019-08-15回复小小小强
      能给个代码片段瞅瞅不,蟹蟹
      2019-08-15
      回复
    • 你好耀眼。
      你好耀眼。
      2019-08-15回复小小小强
      我改用scroll-view了,但是还是真机上延迟,过一会才会置顶,哎好愁
      2019-08-15
      回复
    查看更多(19)
  • Trump
    Trump
    2021-09-03

    我去 写了差不多两年前端了 都没发现吸顶这个css,我尼玛,我今天写这个,就特别好奇为啥人家的不卡顿,可是监听滚动绝对定位百分百卡顿的,居然还有个css吸顶效果,看来得出去打工,不能闭门造车啦


    2021-09-03
    有用
    回复 1
    • 你好耀眼。
      你好耀眼。
      2021-09-06
      哈哈哈是的哦,还是要多交流,有时候短短一行几个字就解决了,辛酸泪哈哈
      2021-09-06
      回复
  • 朱玉琴
    朱玉琴
    2020-03-20

    可以用vant 的插件 tab 自带吸顶。

    2020-03-20
    有用
    回复 1
    • 你好耀眼。
      你好耀眼。
      2020-03-23
      是的,用了position:sticky了谢谢,解决了
      2020-03-23
      回复
  • 浊
    2019-08-22

    老哥解决了吗?我这边也是,预览安卓ios都没问题,但是真机调试ios只有在滚动结束才会触发事件

    2019-08-22
    有用
    回复 3
    • 你好耀眼。
      你好耀眼。
      2019-08-22
      第一个人回复我的那个代码片段,我感觉是用下来最好的,稍有延迟,但是还好
      2019-08-22
      回复
    • 你好耀眼。
      你好耀眼。
      2019-08-22
      https://developers.weixin.qq.com/s/ExUP5DmW7vao
      2019-08-22
      回复
    • 浊
      2019-08-22回复你好耀眼。
      好的,我试一下,谢谢啦
      2019-08-22
      回复
  • 2019-08-19

    这个问题很容易解决。

    思路很简单,规定一个刷新率,比如5。函数每调用5次,再执行一次渲染。这样基本上可以解决低效的问题。

    onPageScroll:function(e){
      if(this.data.setDataCount || this.data.setDataCount<=0){
        if(this.data.setDataCount<=0){
          //执行渲染
          this.setData(e)
          //重置次数
          this.data.setDataCount = 5
        }else{
          //倒数。
          this.data.setDataCount -= 1
        }
      }else{
        //第一次调用,建立变量
        this.data['setDataCount'] = 5
      }
    },

    但是,过快滑动可能导致部分区域被忽略。这个可以自行优化

    2019-08-19
    有用
    回复 3
    • 你好耀眼。
      你好耀眼。
      2019-08-19
      j就是所谓节流函数那种方法吗?
      2019-08-19
      回复
    • 你好耀眼。
      你好耀眼。
      2019-08-19
      谢谢,我先试一下
      2019-08-19
      回复
    • 2019-08-19回复你好耀眼。
      对滴
      2019-08-19
      回复
登录 后发表内容
问题标签