微信小程序自定义顶部

wxml

<view style="height:{{titleHeight}}px;background:{{background}}" class="user-main-top" id="user-main-top">
      <view class="user-main-top-text" style="height:{{titleHeight /2}}px;">我的</view>
    </view>

onLoad中计算高度

let _this = this;
 wx.getSystemInfo({
      success: res => {
        this.setData({
          titleHeight: res.statusBarHeight + 46 // 赋值导航高度
        })
      },
      fail(err) {
        console.log(err);
      }
    })
 let query = wx.createSelectorQuery();
    query.select("#user-main-top").boundingClientRect();
    query.exec(function(res) {
      _this.setData({
        menuTop: res[0].top
      })
    })

js监听滚动改变背景颜色

/**
  * 监听滚动
  */
 onPageScroll: function(e) {
   var _this = this;
   if (e.scrollTop > _this.data.menuTop) {
     this.onscrollTop();
   } else {
     _this.setData({
       background: "null"
     })
   }
 },