（微信小程序）导航栏悬浮吸顶以及置顶的设置

前言

最近在做小程序的项目，遇到一些问题放在这里，一来作为自己经验收集册，收集自己的项目遇到的问题或者做的东西；二来将自己遇到的问题经验分享出来

前景提要

吸顶功能页面设置在静态的首页，作为一个首页展示的优化来做的，所以没有太多需要加载的数据，可以采用传统的判断滚动窗口高度设置固定栏
此方式不适用流加载或者其他需要大量频繁setdata的操作

吸顶悬浮导航条

成果展示

代码

• wxml

  
  
    
      
          
              
          
          
              
                  我是导航条呀
              
          
              悬浮~~
              
          
      
     
     
    
        
             
        

      
      
        
          
          
                
                  
                    
                      暂无服务提醒
                    
                  
                
          
          
        
        
          
            
            
              卡充值
              余额及时冲
            
          
          
            
            
              我的钱包
              
            
          
        

        
          
          员工福利专区
          
          立即领取>
           没有待领取福利
          
        
      
    
  

• js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    scrollTop: null
  },
 


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {    
 },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },
  scroll: function (e) {
    this.setData({ scrollTop: e.detail.scrollTop })
  },
 
})

• wxss

.page-group{
  display: table;
  /* background-color: blueviolet; */
  width: 100%;
  table-layout: fixed;
  position: relative;
  top: 0;
  left: 0;
  z-index: 999;/*这个设置在原生组件中用于置顶导航条*/
}
.page-group-position{
  position: fixed;
  background-color:#fff
}
/*这两个是关于吸顶设置的，其他的自己设置*/

导航条就这么设置好了，但是由于后面有用到原生组件，可能会出现导航条被原生组件覆盖，但是我们要的导航条就是要显示在顶层啊！

置顶悬浮导航条

情境一

1. 问题描述：因为使用view，层级没有原生组件层级高会被覆盖
2. 思路：那么把view层级提升成原生组件同层级就好了
3. 寻找解决：看官方文档得知，原生组件的层级最高，所以要想层级不低于原生组件，那么就只能将view提升为原生组件，微信提供了cover-view组件
4. 结果：使用cover-view实现了导航条的置顶

情景二

1. 问题描述：cover-view的使用有很多限制（详见官方文档）其中就有不适用if判断控制显示，但是项目中恰好需要这部分的实现
2. 思路：在替他原生组件中寻找cover-view的替代品
3. 寻找解决：查看文档，在原生组建中筛选，筛选条件：没有if使用的限制，需要显示视图不需要多余的video之类的，暂且找到了navigate组件，不写URL时，可当作view使用，完美！就它了
4. 结果：使用navigate组件完美解决层级并且可以随意使用if 等模块