小程序开发-底部导航

底部导航

设置tabbar数据

module.exports = [{
    "pagePath": "pages/index/index",
    "text": "活动专区",
    "iconPath": "https://jw-vip-project.cn-sh2.ufileos.com/marriott/wxapp/home_nor.png",
    "selectedIconPath": "https://jw-vip-project.cn-sh2.ufileos.com/marriott/wxapp/home_pre.gif",
    "auth": 0
  },
  {
    "pagePath": "pages/mine/index/index",
    "text": "更多",
    "iconPath": "https://jw-vip-project.cn-sh2.ufileos.com/marriott/wxapp/mine_nor.png",
    "selectedIconPath": "https://jw-vip-project.cn-sh2.ufileos.com/marriott/wxapp/mine_pre.gif",
    "auth": 0
  }
]

设置数据以及样式

import tabbarList from './tabBarlist/router.js'   //引入数据
  data: {
    tabbarList: tabbarList,
  },

获取父级数据

  properties: {
    activeIdx: {
      type: Number,
      value: 0
    },
  },

ipx适配

let $this= this
   wx.getSystemInfo({
      success: function (res) {
        var model = res.model;
        var iponeX = model.indexOf("iPhone X")
        if (iponeX == '0') {
         	$this.setData({
        	 	iphonexnavbar:ipx
         	})
        } else {
          	$this.setData({
         		iphonexnavbar:''
         	})
        }
      }
    })

wxml

  
    
      
        
      
      {{item.text}}
    
  

pages页面使用

样式

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  font-size: 0;
  background: #000;
  z-index: 999;
  color: #595757;
}

.tabbar-content {
  display: flex;
  font-size: 0;
  position: relative;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}

.tabbar-item {
  height: 100%;
  width: 200rpx;
  color: #595757;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.tabbar-item-icon {
  margin-bottom: 6rpx;
  height: 56rpx;
  z-index: 1000
}

.tabbar-item-icon image {
  width: 50rpx;
  height: 50rpx;
}

.tabbar-item-text {
  font-size: 26rpx;
  line-height: 34rpx;
  height: 30rpx;
}

.tabbar-item.active {
  color: #fff;
}
.ipx{
}