小程序开发-底部导航

底部导航

设置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

<view class='tabbar {{iphonexnavbar}}'>
  <view class="tabbar-content">
    <view class='tabbar-item {{activeIdx === index ? "active" : ""}}' wx:for='{{tabbarList}}' wx:key='{{item.pagePath}}' bindtap='handleItemTap' data-path='{{item.pagePath}}' data-idx='{{index}}'>
      <view class='tabbar-item-icon'>
        <image src='{{activeIdx === index ? item.selectedIconPath : item.iconPath}}'></image>
      </view>
      <view class='tabbar-item-text'>{{item.text}}</view>
    </view>
  </view>
</view>

pages页面使用

<tabbar activeIdx='0' ></tabbar>

样式

.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{
}