评论

小程序页面吸顶效果、右下角悬浮按钮等隐藏显示切换时不卡顿的实现方法

小程序页面吸顶效果、右下角悬浮按钮等隐藏显示切换时不卡顿的实现方法

使用的api及页面方法

api:wx.createSelectorQuery、wx.createIntersectionObserver

页面方法:onPageScroll

为什么使用以上方法?

wx.createSelectorQuery:主要解决页面渲染后保证所涉及的元素能百分百渲染到屏幕上,这里打包一个异步方法。

getElement(elm, component) {
    const _this = this;
    return new Promise((resolve, reject) => {
      let ss = setInterval(function() {
        let Qy = component ? _this.createSelectorQuery() : wx.createSelectorQuery();
        let a = Qy.select(elm).boundingClientRect(function(res) {
          if (res) {
            clearInterval(ss)
            resolve(res)
          }
        }).exec();
      }, 50);
    });
  }

wx.createIntersectionObserver与onPageScroll的作用:
单纯使用onPageScroll切换隐藏显示状态必然会高频率使用setData导致页面卡顿。如果只是在wx.createIntersectionObserver与onPageScroll中隐藏或者显示,即确保每个方法中只setData一次,那么卡顿的现象就不会出现。
以下wx.createIntersectionObserver仅作显示元素

onCreateIntersectionObserver(component,elm) {
    const _this = this;
    this.getElement(elm||".tr-fixed", component).then(res => {
      _this.setData({
        fixed_top: res.top //记录一直显示的元素的top值
      });
      _this.IntersectionObserver = component ? _this.createIntersectionObserver() : wx.createIntersectionObserver()
      _this.IntersectionObserver.relativeTo(".top-transparent", {
        bottom: 2
      }).observe(elm||'.tr-fixed', (res) => {
      //显示吸顶
        const {
          fixed_show
        } = _this.data;
        if (fixed_show === false) {
          _this.setData({
            fixed_show: true
          });
        }
        //显示吸顶
      })
    });
  }

上面代码中:
.top-transparent是自定义参照区域。
.tr-fixed或elm为切换隐藏与显示的元素(事先写好顶部浮动,隐藏起来,这里并没有css仅作为监听对象)
wxml基本代码:

<view class="top-transparent">页面顶部透明参照元素</view>

<view class="tr-fixed">一直显示的部分(滚动的scrollTop小于此元素的top值则隐藏,如果监测到与透明的参照元素交叉则显示)</view>

<view class="fixed-view" wx:if="{{fixed_show}}">隐藏的部分(与一直显示的部分一模一样)</view>
.top-transparent{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: transparent;//透明
  pointer-events: none; //保证此元素所有点击事件无效,即点击事件都穿透到比它层级低的元素上
}

以下onPageScroll仅作隐藏元素

onPageScroll(e) {
    const {
      fixed_top,
      fixed_show
    } = this.data
    // 隐藏吸顶头部
    if (fixed_top != undefined && fixed_show) {
      if (e.scrollTop <= fixed_top) {
        this.setData({
          fixed_show: false
        })
      }
    }
    // 隐藏吸顶头部
  },

代码片段:
https://developers.weixin.qq.com/s/oUhsfCmP76au

最后一次编辑于  08-14  
点赞 1
收藏
评论

4 个评论

  • 冰是沉默的水
    冰是沉默的水
    11-20

    不知道这个怎么样,没来得及在小程序上试试

    https://www.runoob.com/try/try.php?filename=trycss_position_sticky

    11-20
    赞同
    回复
  • 27
    27
    09-05

    在开发者工具上,快速滚动,吸顶会失效。

    09-05
    赞同
    回复 2
    • 两个鱼头
      两个鱼头
      09-05
      思路是这样,但是具体自己调节参照区域以及滚动触发的scrollTop值
      09-05
      回复
    • 27
      27
      09-05回复两个鱼头
      谢谢
      09-05
      回复
  • 浊
    08-19

    这个好像有些问题吧,有的时候滚得快一点他就不会吸顶直接过去了

    08-19
    赞同
    回复 2
    • 两个鱼头
      两个鱼头
      08-19
      调试一下自定义参照区域的高度
      08-19
      回复
    • 浊
      08-19回复两个鱼头
      好的,我等下试试
      08-19
      回复
  • LOFTER
    LOFTER
    08-14

    大神 最好提供个代码片段 学习一下 谢谢

    08-14
    赞同
    回复 1
    • 两个鱼头
      两个鱼头
      08-14
      我感觉说的蛮细的啊... 上面的js整到一个Page方法里不就行了嘛,我也小白的
      08-14
      回复