本文共 2236 字，大约阅读时间需要 7 分钟。

前言

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

前景提要

吸顶功能页面设置在静态的首页，作为一个首页展示的优化来做的，所以没有太多需要加载的数据，可以采用传统的判断滚动窗口高度设置固定栏

吸顶悬浮导航条

成果展示

代码

• 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 等模块

转载地址：http://eofli.baihongyu.com/