微信小程序 自定义底部导航栏（tabbar）

微信小程序 自定义tabbar(底部导航栏)

在移动应用开发中，底部导航栏通常位于屏幕底部，以图标和标签的形式展示应用的不同功能或页面，用户可以通过点击不同的图标来切换页面。

本文的方法就是将底部导航栏单独封装成一个组件，在需要使用的页面进行引用

使用流程

1、新建组件
	在当前项目文档目录下，新建components文件夹，然后在componens文件下新建component，例如：新建studentSysTab
	在studentSysTab组件下新建4个文件，分别为studentSysTab.wxml,studentSysTab.wxss,studentSysTab.json,
	studentSysTab.js

studentSysTab.wxml

<view class="cu-bar tabbar bg-white" style="padding-bottom: {{bottomHeight ?'1':''}}vh;">
  <block wx:for="{{list}}" wx:key="index" wx:key="{{item.pagePath}}">
    <view class="action text-active {{selected == index ? 'icon-path':''}}" bindtap="nav" data-path="{{item.pagePath}}" data-index="{{index}}">
      <image src="{{selected == index ? item.selectedIconPath+'?'+ random : item.iconPath}}" mode="aspectFit"></image>
      <text style="color:{{selected === index ? selectedColor : color}}">{{item.text}}</text>
    </view>
  </block>
</view> 

studentSysTab.wxss

.tabbar {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 120rpx;
}
.tabbar image {
	width: 46rpx;
	height: 41rpx;
	display: flex;
	margin: 0 auto;
}
.cu-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	color: #000 !important;
	background-color: #fff;
	box-shadow: 0 0 1px 0 #ccc;
	z-index: 99;
}
.text-active {
	min-width: 80rpx;
	text-align: center;
}
.text-active>text {
	width: 40rpx;
	height: 20rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #666666;
}
.icon-path>image {
	/* width: 56rpx;
    height: 51rpx; */
}

studentSysTab.json

{
  "component": true,
  "usingComponents": {}
}

studentSysTab.js

const app = getApp();

Component({
  properties:{
    selected:Number,
    rId:Number
  },
  data: {
    random: '',
    bottomHeight: app.globalData.bottomHeight,
    selected: 0, //默认选中信息录入
    color: "#1F1F1F",
    selectedColor: "#1CA0FB",
    backgroundColor: "#ffffff",
    Tablist: [],
    list: [
      {
        pagePath:"/路径",
        iconPath: "默认展示的图片/路径",
        selectedIconPath: `选中时显示的图片/路径`,
        text: "选项1"
      },
       {
        pagePath:"/路径",
        iconPath: "默认展示的图片/路径",
        selectedIconPath: `选中时显示的图片/路径`,
        text: "选项2"
      },
       {
        pagePath:"/路径",
        iconPath: "默认展示的图片/路径",
        selectedIconPath: `选中时显示的图片/路径`,
        text: "选项3"
      },
       {
        pagePath:"/路径",
        iconPath: "默认展示的图片/路径",
        selectedIconPath: `选中时显示的图片/路径`,
        text: "选项4"
      },
    ]
  },
  methods: {
    nav(e) {
      const that = this
      const data = e.currentTarget.dataset
      const url = data.path+'?id='+that.data.rId
      if (url) {
        wx.reLaunch({
          url
        })
      }
    }
  }
})

app.js

App({ 
  onLaunch() {
    //判断是否是有iphone的底部小黑条 
    wx.getSystemInfoAsync({
      success: res => {
        var bottomHeight = res.screenHeight - res.safeArea.bottom
        wx.setStorageSync('bottomHeight', bottomHeight)
      },
      fail(err) {
      }
    })
  },
  globalData: {
    bottomHeight: 0 
  }
})

*也需要引入colorUI的main.wxss

2、引入组件
	在项目的.json配置文件中加入usingComponents

3、在需要使用的页面引入组件
<view>
  <studentSysTab selected="0" rId="{{rId}}"/>
</view>