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

app.json中修改 tabBar

  "tabBar": {
    "custom": true,
    "color": "#ABABAB",
    "selectedColor": "#22C992",
    "borderStyle": "white",
    "backgroundColor": "#FAF9F9",
    "list": [{
        "pagePath": "pages/tabar/index/index",
        "iconPath": "/image/index.png",
        "selectedIconPath": "/image/index1.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/tabar/practice/index",
        "iconPath": "/image/practice.png",
        "selectedIconPath": "/image/practice1.png",
        "text": "劳动实践"
      },
      {
        "pagePath": "pages/tabar/manage/index",
        "iconPath": "/image/manage.png",
        "selectedIconPath": "/image/manage1.png",
        "text": "教务管理"
      },
      {
        "pagePath": "pages/tabar/mine/index",
        "iconPath": "/image/my.png",
        "selectedIconPath": "/image/my1.png",
        "text": "我的"
      }
    ]
  }

在根目录 和pages 同级别的目录创建custom-tab-bar组件

wx.ml

<view class="tab-bar">
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
    <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
  </view>
</view>

wx.ss

.tab-bar {
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 11rpx 0 40rpx;
  height: 120rpx;
  background: white;
  display: flex;
  box-shadow: 0px -6rpx 30rpx 0px rgba(0, 0, 0, 0.05);
}



.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item image {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 7rpx;
}

.tab-bar-item view {
  height: 20rpx;
  font-size: 20rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #A5AAAE;
  line-height: 20px;
}

 

wx.js

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    "list": [{
        "pagePath": "/pages/tabar/index/index",
        "iconPath": "/image/index.png",
        "selectedIconPath": "/image/index1.png",
        "text": "首页"
      },
      {
        "pagePath": "/pages/tabar/practice/index",
        "iconPath": "/image/practice.png",
        "selectedIconPath": "/image/practice1.png",
        "text": "劳动实践"
      },
      {
        "pagePath": "/pages/tabar/manage/index",
        "iconPath": "/image/manage.png",
        "selectedIconPath": "/image/manage1.png",
        "text": "教务管理"
      },
      {
        "pagePath": "/pages/tabar/mine/index",
        "iconPath": "/image/my.png",
        "selectedIconPath": "/image/my1.png",
        "text": "我的"
      }
    ]
  },
  attached() {},
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({
        url
      })
      this.setData({
        selected: data.index
      })
    }
  }
})

wx.json

{
  "component": true
}

 

其他开始跳转的首页tabBar wx.js  中的onShow函数中加入  把选择框修改值即可

  if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected:30
      })
    }

 

底部导航栏内 登录 与不登录 后样式修改变化

 

 

登录后

 

 

 在根目录 和pages 同级别的目录创建custom-tab-bar组件

index.js

const app = getApp();
Component({
  data: {
    selected: 0,
    login: app.globalData.userInfo ? 1 : 0,
    "color": "#999999",
    "selectedColor": "#1B88EE",
    "list": [{
        "pagePath": "/pages/tabar/frontpage/index",
        "text": `${app.globalData.userInfo?'工作台':'首页'}`,
        "iconPath": "/images/tab_icon_grzx_normal.png",
        "selectedIconPath": "/images/tab_icon_grzx_pressed.png"
      },
      {
        "pagePath": "/pages/tabar/person/index",
        "text": "个人中心",
        "iconPath": "/images/tab_icon_sy_normal.png",
        "selectedIconPath": "/images/tab_icon_sy_pressed.png"
      }
    ]
  },
  attached() {
    this.checkLogin();
  },

  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset;
      const url = data.path

      wx.switchTab({
        url
      })
      this.setData({
        selected: data.index
      })
    },
    checkLogin() {
      const that = this;
      if (app.globalData.userInfo) {
        let obj = {
          "pagePath": "/pages/tabar/frontpage/index",
          "text": `${ app.globalData.userInfo ? '工作台':'首页'}`,
          "iconPath": "/images/tab_icon_grzx_normal.png",
          "selectedIconPath": "/images/tab_icon_grzx_pressed.png"
        }
        let list = that.data.list;
        list.splice(0, 1, obj);
        that.setData({
          list,
          userInfo: app.globalData.userInfo
        })
      }else{
        //未登录 循环调用
        setTimeout(()=>{
          that.checkLogin()
        },2000)
      }
    }
  },
})

index.jaon

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

index.wxml

<!--custom-tab-bar/index.wxml-->
<view class="tab-bar">
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
    <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
  </view>
</view>

index.wxss

/* custom-tab-bar/index.wxss */


.tab-bar {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 20rpx 0 0;
    height: 120rpx;
    box-sizing: border-box;
    background: white;
    display: flex;
    box-shadow: 0px -6rpx 30rpx 0px rgba(0, 0, 0, 0.05);
  }
  
  
  
  .tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  
  .tab-bar-item image {
    width: 48rpx;
    height: 48rpx;
    margin-bottom: 7rpx;
  }
  
  .tab-bar-item view {
    height: 20rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #A5AAAE;
    line-height: 20px;
  }

 

app.js

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs),


      // 登录
      wx.login({
        success: res => {
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
        }
      })
  },
  onShow() {
    const self=this;
    wx.getStorage({
      key: 'userInfo',
      success (res) {
        if(res.data){
          self.globalData.userInfo=res.data;
        }
      }
    })
  },
  globalData: {
    userInfo: null
  },
})

app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/tabar/frontpage/index",
    "pages/tabar/person/index",
    "custom-tab-bar/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "custom": true,
    "color": "#999999",
    "selectedColor": "#1B88EE",
    "borderStyle": "white",
    "backgroundColor": "#FAF9F9",
    "list": [
      {
        "pagePath": "pages/tabar/frontpage/index",
        "text": "首页",
        "iconPath": "images/tab_icon_grzx_normal.png",
        "selectedIconPath": "images/tab_icon_grzx_pressed.png"
      },
      {
        "pagePath": "pages/tabar/person/index",
        "text": "个人中心",
        "iconPath": "images/tab_icon_sy_normal.png",
        "selectedIconPath": "images/tab_icon_sy_pressed.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

 

首页tabar页面 点击登录 及tabar跳转需要添加的方法

index.js

// pages/tabar/frontpage/index.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    items: [{
        id: 'id_one',
        text: '上课报名'
      },
      {
        id: 'id_two',
        text: '我的课表'
      },
      {
        id: 'id_three',
        text: '考勤请假'
      },
      {
        id: 'id_four',
        text: '我的订单'
      }
    ],
    userInfo: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  onShow: function () {
    app.onShow();
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.setData({
      userInfo: app.globalData.userInfo ? app.globalData.userInfo : ''
    })
  },
  login() {
    const that = this;
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        wx.setStorage({
          key: 'userInfo',
          data: res.userInfo,
        });
        wx.getStorage({
          key: 'userInfo',
          success(res) {
            app.globalData.userInfo = res.data;
            that.setData({
              userInfo: res.data
            },()=>{
              console.log(app.globalData,'---');
            })
          }
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

index.xml

<!-- pages/tabar/frontpage/index.wxml -->
<view-scroll scroll-y="true" class="scroll_view">
    <view class="header">
        <view class="header_top">
            <image src="{{userInfo.avatarUrl}}" class="img_back img {{userInfo?'':'no_active'}}" />
            <button class="btn" open-type="getUserInfo" bindtap="login" wx:if="{{!userInfo}}">
                立即登录
            </button>
            <view class="login_name" wx:if="{{userInfo}}">{{userInfo.nickName}}</view>
        </view>
        <swiper class="special_swiper" indicator-dots="false" indicator-color="#B1AAA4" indicator-active-color="#FFFFFF" autoplay="false" current="0" current-item-id="" interval="5000" duration="1000" circular="false" vertical="{{false}}" previous-margin="false" next-margin="0px" display-multiple-items="1" skip-hidden-item-layout="false" bindchange="" bindanimationfinish="">
            <swiper-item>hello</swiper-item>
            <swiper-item>world</swiper-item>
        </swiper>
    </view>
    <view class="main">
        <view class="list">
            <block wx:for="{{items}}">
                <view class="item">
                    <view class="i_img img_back {{item.id}}"></view>
                    <view class="i_title">{{item.text}}</view>
                </view>
            </block>
        </view>
        <view class="evaluation">
            <view class="e_title">课堂评价</view>
            <view class="e_no_con">暂无课堂评价</view>
        </view>
    </view>
</view-scroll>

index.wxss

.img_back {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.scroll_view {
    width: 750rpx;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.header {
    width: 750rpx;
    height: 512rpx;
    box-sizing: border-box;
}

.header_top {
    width: 750rpx;
    height: 104rpx;
    box-sizing: border-box;
    padding: 0 40rpx;
    display: flex;
    margin: 30rpx 0;
    background: #FFFFFF;
}

.header_top .img {
    width: 104rpx;
    height: 104rpx;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-right: 30rpx;
    display: block;
}

.header_top .img.no_active {
    background-image: url("data:image/png;base64,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");
}

.header_top .btn {
    box-sizing: border-box;
    padding: 0;
    margin: 20rpx 0;
    width: 146rpx;
    height: 64rpx;
    background: linear-gradient(90deg, #1B88EE 0%, #4CA8FF 100%);
    border-radius: 34rpx;
    -webkit-border-radius: 34rpx;
    -moz-border-radius: 34rpx;
    -ms-border-radius: 34rpx;
    -o-border-radius: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 64rpx;
}

.header_top .login_name {
    margin-top: 34rpx;
    width: 108rpx;
    height: 36rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #222222;
    line-height: 36rpx;
}

.header .special_swiper {
    width: 678rpx;
    height: 308rpx;
    background: #D8D8D8;
    border-radius: 20rpx;
    -webkit-border-radius: 20rpx;
    -moz-border-radius: 20rpx;
    -ms-border-radius: 20rpx;
    -o-border-radius: 20rpx;
    margin: 0 36rpx 40rpx;
}


.scroll_view .main {
    flex: 1;
    width: 750rpx;
    box-sizing: border-box;
    background: #F7F7F7;
}

.scroll_view .main .list {
    width: 750rpx;
    box-sizing: border-box;
    padding: 4rpx 36rpx 60rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.scroll_view .main .list .item {
    display: flex;
    flex-direction: column;
    width: 202rpx;
    height: 206rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    align-items: center;
    justify-content: center;
    margin-top: 36rpx;
    -webkit-border-radius: 20rpx;
    -moz-border-radius: 20rpx;
    -ms-border-radius: 20rpx;
    -o-border-radius: 20rpx;
}


.scroll_view .main .list .item .i_img {
    width: 72rpx;
    height: 72rpx;
    margin: 40rpx auto 20rpx;
}

.scroll_view .main .list .item .i_title {
    width: 104rpx;
    height: 34rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    line-height: 34rpx;
    display: block;
    margin: 0 auto;
}

.id_one {
    background-image: url("data:image/png;base64,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");
}

.id_two {
    background-image: url("data:image/png;base64,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");
}

.id_three {
    background-image: url("data:image/png;base64,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");
}

.id_four {
    background-image: url("data:image/png;base64,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");
}


.scroll_view .main .evaluation {
    display: flex;
    flex-direction: column;
}

.scroll_view .main .evaluation .e_title {
    width: 750rpx;
    padding-left: 36rpx;
    height: 40rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #222222;
    line-height: 40rpx;
    box-sizing: border-box;
}

.scroll_view .main .evaluation .e_no_con {
    width: 750rpx;
    height: 152rpx;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 152rpx;
}