小程序自定义tabbar(组件形式)

tabbar的显示及隐藏

// 显示                   // 隐藏 
wx.showTabBar({})      wx.hideTabBar({})

安卓手机和苹果手机底部横条站位

  /* 注意：env() 跟 constant() 需要同时存在，而且顺序不能换。 
	如需要左右上位置的 请自行百度*/
  padding-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

自定义tabbar的组件形式

组件页面

//组件页面就正常编写就可以  正常的方法 接收参数

//Component  中 
 properties: {
    currentIdx: {
      type: Number,
      value: 0,
      observer: function (t) {  //observer: function(newVal, oldVal) {
        if (t) {
         // this.setData({ tabbar })
        }
      }
    },
    newIndex: {
      type: Number,
      value: 0
    },
    needAuth: {
      type: Boolean,
      value: false
    }
  },

引用使用的页面

/* json文件的组件配置     */
 "usingComponents": {
    "i-tabbar": "../../components/tabbar/index"
  }

<!-- html 页面使用   传入参数和方法  接收currentIdx    接收方法bind:authModal   -->

<i-tabbar currentIdx='4' cartNum='{{cartNum}}' newIndex='{{0}}' tabbarRefresh="{{tabbarRefresh}}" needAuth="{{needAuth}}"  bind:authModal="authModal" />