头部固定实现下拉刷新

功能描述

使用微信小程序原生下拉刷新方法，下拉时头部与内容跟随向下滑动，内容向上滑动时，头部固定不动

代码

1.xml

<view class="home">
  <scroll-view  scroll-y="true">
    <view style="height:2000rpx;">
      <view class="{{top>0 ? 'topnav-defale' : 'topnav'}}">
        <text>我是固定头部</text>
      </view>
      <text>我是内容</text>
    </view>
  </scroll-view>
</view>

2.wxss

.home {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.topnav {
  height: 80rpx;
  width: 100%;
  background: #f00;
}

.topnav-defale {
  height: 80rpx;
  width: 100%;
  background: #f00;
  position: fixed;
  top: 0;
}

3.json

{
  "usingComponents": {},
  "enablePullDownRefresh": true
}

4.js

/**
   * 页面的初始数据
   */
  data: {
    top: 0  
  },
  onPageScroll: function (e) {
   let that = this;
   that.setData({ top: e.scrollTop });
  }

5.效果