收藏
回答

关于导航菜单滚动固定的性能问题

在页面向上滑动,当导航菜单到达顶部后让其固定在顶部,向下滑动后移除固定回到原来的位置。

现在我是通过onPageScroll来实现, 虽然可以实现,但是体验很差,真机体验的时候,有闪动都算了,滑动快了有时候还没反应,延迟太长,看了别人的小程序没这样的问题,请问有什么好办法?

最后一次编辑于  2018-12-28
回答关注问题邀请回答
收藏

2 个回答

  • 卢霄霄
    卢霄霄
    2018-12-28

    不在乎兼容性问题,可以直接用 position: sticky;

    要兼容,可以用相交状态监听,但是要麻烦点,API如下

    https://developers.weixin.qq.com/miniprogram/dev/api/wx.createIntersectionObserver.html

    2018-12-28
    赞同 1
    回复 10
    • 蹦叉叉蹦叉叉蹦叉叉蹦叉叉蹦叉叉名
      蹦叉叉蹦叉叉蹦叉叉蹦叉叉蹦叉叉名
      2018-12-28

      position:sticky 我写了,目前测试了一个android和ios没问题,只是看到有人发帖说有些真机测试不行,所以想找个完美一点的。wx.createIntersectionObserver 我试着用了下,没有反应


      this._observer = wx.createIntersectionObserver(this)

      this._observer

      .relativeTo('page')

      .observe('.index-content-view', (res) => {

      console.log(res);

      })


      我这样写的,page换成一个类也不行,不知道是那个参数错了。


      * 还有个问题就是,就算用wx.createIntersectionObserver的例子,还是会有延迟的问题,滑动快了有时候就没反应

      2018-12-28
      回复
    • 卢霄霄
      卢霄霄
      2018-12-28回复蹦叉叉蹦叉叉蹦叉叉蹦叉叉蹦叉叉名

      去掉 onPageScroll 或者 scroll-view的 bindscroll

      2018-12-28
      回复
    • 蹦叉叉蹦叉叉蹦叉叉蹦叉叉蹦叉叉名
      蹦叉叉蹦叉叉蹦叉叉蹦叉叉蹦叉叉名
      2018-12-28回复卢霄霄

      this._observer = wx.createIntersectionObserver(this)

      this._observer

      .relativeTo('.content')

      .observe('.index-content-view', (res) => {

      console.log(res);

      })

      这个只有在content和index-content-view相交的时候才会有反应, 不知道还有什么情况可以触发回调事件,如果是相交的话,就达不到预期的效果了

      2018-12-28
      回复
    • 卢霄霄
      卢霄霄
      2018-12-28回复蹦叉叉蹦叉叉蹦叉叉蹦叉叉蹦叉叉名

      能做个代码片段吗?

      2018-12-28
      回复
    • 蹦叉叉蹦叉叉蹦叉叉蹦叉叉蹦叉叉名
      蹦叉叉蹦叉叉蹦叉叉蹦叉叉蹦叉叉名
      2018-12-28回复卢霄霄

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

      现在我是这样写的,因为数据很少,也没有出现滑动太快而没有反应的情况发生,项目中就出现滑动太快而没有触发回调,必须再轻微滑动一下才会有反应,请问可以优化一下吗?

      2018-12-28
      回复
    查看更多(5)
  • Kevin
    Kevin
    01-21

    你好,这个最后的解决方案是什么?可以告知一下吗

    01-21
    赞同
    回复 1
    • 蹦叉叉蹦叉叉蹦叉叉蹦叉叉蹦叉叉名
      蹦叉叉蹦叉叉蹦叉叉蹦叉叉蹦叉叉名
      01-21

      this._observer = wx.createIntersectionObserver(this)

      this._observer

      .relativeTo('.content')

      .observe('.index-content-view', (res) => {

      console.log(res);

      })

      用的这个,当contentindex-content-view交互的交互的时候就可以触发事件,这是需要选择一个参照物,上面的代码content是参照物,index-content-view是需要滚动固定是块,他们之间有重叠的内容的时候触发一次,不重叠又触发一次(描述可能不是那么容易理解,了解下createIntersectionObserver这个API应该就懂了。暂时没找到其他方法,考虑兼容性的话可以用position:sticky


      01-21
      回复