小程序自定义tabbar固定定位盖住内容解决方案

<!-- 代替固定tabbar，使tabbar内容层级自动占位同等高度的空间,页面使用时无需考虑内容被盖住的问题 -->
<view style="height: {{min_height}}px;"></view>
<!-- 固定定位的tabbar内容 -->
<view class='x-class fixed flex {{fixed_type}}' >
  <slot></slot>
</view>

.fixed{
  position:fixed;left:0;right:0;border-top:1px solid #f3f3f3;box-sizing: border-box;width: 100%;
}
.bottom{bottom:0;}
.top{top: 0;z-index: 11;}
.flex > x-tabbar-flex-item{flex:1}

// packages/goods-action/index.js
Component({
  externalClasses: ['x-class'],
  /**
   * 组件的属性列表
   */
  properties: {
    //tabbar的背景色
    bg_color: {
      type: String,
      value: ''
    },
    // 固定定位的位置，目前只做了top（窗口顶部） bottom（窗口底部）
    fixed_type:{
      type:String,
      value:'bottom'
    },
    // tabbar最小高度，根据tabbar内容计算，也可以通过组件实例化传值
    min_height:{
      type:Number,
      value:0
    }
  },
  lifetimes: {
    // 在组件在视图层布局完成后执行
    ready: function() {
      //插槽中可能需要请求接口后更新内容，请求接口后需要在接口中重新设置高度
      if(!this.data.min_height){
      // 获取tabbar实际的高度
        this.createSelectorQuery().select('.fixed').boundingClientRect((res)=>{
          this.setData({min_height:res.height});
        }).exec();
      }
    }
  }
})