index.wxml
<!--底部導航  -->
<view class='footer'>
  <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="this" bindtap="chooseImg">
    <image class="footer-image" hidden='{{curIdx===index}}' src="{{item.imgUrl}}"></image>
    <image class="footer-image" hidden='{{curIdx!==index}}' src="{{item.curUrl}}"></image>
    <view class="footer-text">{{item.text}}</view>
  </view>
</view>
<!--底部導航  -->
 

index.js
page({

 const app = getApp();
    data:{
         //  底部導航
     curIdx: 0,
     listInfo: [
       {
         text: '首頁',
         imgUrl: '/image/index.png',
         curUrl: '/image/index_active.png',
       },
       {
         text: '兼職入口',
         imgUrl: '/image/market.png',
         curUrl: '/image/market_active.png',
       },
       {
         text: '個人中心',
         imgUrl: '/image/my.png',
         curUrl: '/image/my_active.png',
       },
     ]   
    },
    Navigation: function (event) {
    var that = this;
    app.Navigation(event, that);
  },
  // 底部導航
  chooseImg: function (e) {
    this.setData({
      curIdx: e.currentTarget.dataset.current
    })
    //  console.log(e)
    //  console.log(this.data.curIdx) 
  },
  // 底部導航結束
})
 

app.wxss
/*自定義底部導航開始  */
.footer {
   position: fixed; 
  bottom: 0;
  width: 100%;
  height:100rpx; /*footer的高度*/
  background: #ffffff;
  z-index: 500;
  border-top:1rpx solid #ccc;
  display: flex;
  flex-direction: row;
}
.footer_list{
width:17%;
height:100%;
text-align:center;
padding-top:8rpx;
margin-left:60rpx;
margin-right:62rpx;
}
.footer-image{
   width:40%;
   height:45%;
}
.footer-text{
    font-size: 22rpx;
}
/*底部導航結束 */
 

part-time.wxml
<!--底部導航  -->
<view class='footer'>
  <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="this" bindtap="chooseImg">
    <image class="footer-image" hidden='{{curIdx===index}}' src="{{item.imgUrl}}"></image>
    <image class="footer-image" hidden='{{curIdx!==index}}' src="{{item.curUrl}}"></image>
    <view class="footer-text">{{item.text}}</view>
  </view>
</view>
<!--底部導航  -->

part-time.js
page({
   const app = getApp();
    data:{
         //  底部導航
    curIdx: 1,
    listInfo: [
      {
        text: '首頁',
        imgUrl: '/image/index.png',
        curUrl: '/image/index_active.png',
      },
      {
        text: '兼職入口',
        imgUrl: '/image/market.png',
        curUrl: '/image/market_active.png',
      },
      {
        text: '個人中心',
        imgUrl: '/image/my.png',
        curUrl: '/image/my_active.png',
      },
    ]
    },
     Navigation: function (event) {
    var that = this;
    app.Navigation(event, that);
  },
  // 底部導航
  chooseImg: function (e) {
    this.setData({
      curIdx: e.currentTarget.dataset.current
    })
    //  console.log(e)
    //  console.log(this.data.curIdx) 
  },
  // 底部導航結束
})

my.wxml
<!--底部導航  -->
<view class='footer'>
  <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="this" bindtap="chooseImg">
    <image class="footer-image" hidden='{{curIdx===index}}' src="{{item.imgUrl}}"></image>
    <image class="footer-image" hidden='{{curIdx!==index}}' src="{{item.curUrl}}"></image>
    <view class="footer-text">{{item.text}}</view>
  </view>
</view>
<!--底部導航  -->

Page({
const app = getApp();
  /**  
   * 頁面的初始資料  
   */
  data: {
    //  底部導航
    curIdx: 2,
    listInfo: [
      {
        text: '首頁',
        imgUrl: '/image/index.png',
        curUrl: '/image/index_active.png',
      },
      {
        text: '兼職入口',
        imgUrl: '/image/market.png',
        curUrl: '/image/market_active.png',
      },
      {
        text: '個人中心',
        imgUrl: '/image/my.png',
        curUrl: '/image/my_active.png',
      },
    ]
  },
  // 導航
  Navigation: function (event) {
    var that = this;
    app.Navigation(event, that);
  },
  // 底部導航
  chooseImg: function (e) {
    this.setData({
      curIdx: e.currentTarget.dataset.current
    })
    //  console.log(e)
    //  console.log(this.data.curIdx) 
  },
  // 底部導航結束
})