微信小程序自定义导航栏，滚动控制透明度问题

关于微信小程序自定义导航栏，滚动控制透明度问题，
简单的思路 是在onPageScroll 的api里面控制自定义导航栏的样式

先简单说自定义导航栏，因为全面屏的关系，我们要先获取到手机状态栏的具体高度，来实现兼容各种手机屏幕的顶部
这里简单的说一下，调用 微信的获取胶囊按钮信息的api来给盒子一个外边距就能简单的实现兼容问题

onLoad: function (t) {
    this.setData({
      paddingHeight: wx.getMenuButtonBoundingClientRect().top,
    })
  },

解决了 头部 兼容问题， 接下来 实现 监听滚动屏幕改变导航栏的透明度
方法很简单
只要在onPageScroll里进行计算赋值就能简单实现

// js

onPageScroll(t){
let topOpacity = t.scrollTop / 100 - .4
    if (t.scrollTop < 40) {
      topOpacity = 0
    } else if (topOpacity >= 1) {
      topOpacity = 1
    }
    this.setData({
      topOpacity: topOpacity
    })
}

//wxml

<view style="padding-top:{{paddingHeight}}px;opacity:{{topOpacity}}" >
	
</view>

//wxss
css 的方法就是固定定位

本以为 就能以简单的几段代码就能实现这个需求，
但是 ！！！
接下来是重点
也是一个巨坑

微信提供的 onPageScroll api中，如果你一直在监听的过程中调用 setData 给实例赋值，你会发现一个很严重的问题，在一些手机上他会变得很卡 ，甚至渲染的速度会变得有延迟 ，具体原因 ：

为了能完美兼容且优化，必须 做一些限制

直接上代码

首先 全局定义一个变量
var topOpacity = 0;
接着

onPageScroll(t){
if (t.scrollTop < 40) {
      topOpacity = 0
      if(this.data.topOpacity != 0){
        this.setData({
          topOpacity: 0
        })
      }
    } else if (t.scrollTop >= 40) {
      if(topOpacity<=1){
        topOpacity = t.scrollTop / 100 - .4
      }else{
        topOpacity = 1
      }
      if(topOpacity<=1){
        this.setData({
          topOpacity: topOpacity
        })
      }
    }
   }

这样就能完美处理这个问题的出现 。

希望能帮助正在迷茫的你，加油 ！！！