微信小程序局部刷新触发整页刷新效果

效果图
微信小程序局部刷新触发整页刷新效果_第1张图片

如上图所示,头部的选项栏时固定的(fixed),下部的信息栏是滚动的, 由于头部是fixed所以无法实现下拉刷新的效果,如果去掉fixed当我们上拉的时候,选项栏又无法固定,所以我们需要监听页面下拉的状态随时改变选项栏的状态
1获取滚动状态

  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },

2信息栏监听下拉状态的改变而改变自己的状态

:class="scrollTop>0?'head-title-fixed':'head-title-absolute'"
  .head-title-absolute{
    top: 0;position: absolute;
  }
  .head-title-fixed{
    top: 0;position: fixed;
  }

你可能感兴趣的:(前端,前端常用开发记录)