小程序菜单栏吸顶效果

需要用到页面滚动监听事件onPageScroll (e) { }

//index.wxml
 <view class='{{typeFixed?"typefixed":""}}'></view>

//index.wxss
 .typefixed{position: fixed;top:100rpx;left:0;z-index: 3;}

//index.js

data:{
  typeFixed:false
},
onPageScroll:function(e){
   //当滚动位置大于190px并且typeFixed为true时,setData不再执行，可有效避免页面的卡顿，以及吸顶时页面的抖动
    if (e.scrollTop >= 190 && !this.data.typeFixed){
        this.setData({
          typeFixed: true
        })
        console.log(11111)
    } else if (e.scrollTop < 190 && this.data.typeFixed){
       this.setData({
         typeFixed:false
       })
       console.log(22222)
     }
  }

setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。因此尽量减少setData