微信小程序 自定义 Tab custom-tab-bar 点击刷新，回到首页

前言：

微信项目中需要做个二维码的功能，显示的时候要突出出来，So, 只能自定义了，先看一下我们要做成这个样子，看到这个阴影是不是有点恐慌，不要怕，很简单

一、修改 app.json 文件，将 tabBar修改为自定义tab，list 保持不变，最多5个

  "tabBar": {
    "selectedColor": "#FB7F32",
    "borderStyle": "white",
    "custom": true, // 自定义tab
    "usingComponents": {},
　　
    "list": [
      {
        "pagePath": "pages/Home/index",
        "iconPath": "image/home.png",
        "selectedIconPath": "image/homeActive.png",
        "text": "组件"
      },
      {
        "pagePath": "pages/Message/index",
        "iconPath": "image/message.png",
        "selectedIconPath": "image/messageActive.png",
        "text": "消息中心"
      },
      {
        "pagePath": "pages/Home/index",
        "iconPath": "image/qrCode.png",
        "selectedIconPath": "image/qrCode.png",
        "text": ""
      },
      {
        "pagePath": "pages/Home/index",
        "iconPath": "image/order.png",
        "selectedIconPath": "image/orderActive.png",
        "text": "订单"
      },
      {
        "pagePath": "pages/Home/index",
        "iconPath": "image/mine.png",
        "selectedIconPath": "image/mineActive.png",
        "text": "我的"
      }
    ]

　　

二、在项目的根目录新建 custom-tab-bar，这个文件就是微信已经帮我们定义好了，只需要新增文件，就可以微信自动读取

三、custom-tab-bar/index.wxml 写入，官网中提供，使用 cover-view 标签来操作，目前我这边是使用view，因为  cover-view 在向上滑动的时候，会带着tab 一起拖上去，不太好看，

 

<view class="tab-bar" style="background: url('{{background}}') no-repeat; background-size: 100% auto">
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab" >
    <view class="center_part" >
      <view class="center_part_code" wx:if="{{item.isSpecial}}">
        <image class=" center-has-noimg" src="../image/qrCode.png" ></image>
      </view>
      <image class=" center-has-image" src="{{selected%20===%20index%20?%20item.selectedIconPath%20:%20item.iconPath}}" wx:else></image>
    </view>
    <view style="color: {{selected === index ? selectedColor : color}}" class="cover-text">{{item.text}}</view>
  </view>
</view>

　　

四、custom-tab-bar/index.js 写入

const app = getApp()

Component({
  data: {
    selected: 0, // 目前tab所在的index 
    color: "#999", // 未选中颜色
    selectedColor: "#D0021B", // 选中颜色
　　// tab 自定义配置需与index.json 保持一致
    list: [{
      pagePath: "/pages/Home/index",
      iconPath: "../image/home.png",
      selectedIconPath: "../image/homeActive.png",
      text: "首页",
      isSpecial: false
    }, {
      pagePath: "/pages/Message/index",
      iconPath: "../image/message.png",
      selectedIconPath: "../image/messageActive.png",
      text: "消息中心",
      isSpecial: false
    }, {
      pagePath: "/pages/pay/index",
      iconPath: "image/icon_API.png",
      selectedIconPath: "image/icon_API_HL.png",
      text: "",
      isSpecial: true
    },  {
      pagePath: "/index/index2",
      iconPath: "../image/order.png",
      selectedIconPath: "../image/orderActive.png",
      text: "历史订单",
      isSpecial: false
    }, {
      pagePath: "/index/index2",
      iconPath: "../image/mine.png",
      selectedIconPath: "../image/mineActive.png",
      text: "我的",
      isSpecial: false
    }],
  },
  methods: {
　　// 切换 tab 事件
    switchTab(e) {
      let that = this
      const idx = e.currentTarget.dataset.index
      const path = e.currentTarget.dataset.path

      // 跳转页面
      wx.switchTab({
         url: path,
      })

      that.setData({
        selected: idx
      })
    }
  }
})    

　　

五、custom-tab-bar/index.wxss 写入

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90rpx;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 99;
  position: relative;
  padding-top: 17rpx;
}
 
.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
 
.tab-bar-item cover-image {
   27px;
  height: 27px;
}
 
.tab-bar-item .cover-text {
  font-size: 10px;
}
.txt{
  color: #aaaaaa;
}
.fontWeight{
  font-weight: bold;
}
.bg_rec{
  background: #ffd324;
   80rpx;
  min-height: auto;
  height: 20rpx;
  margin-top: -28rpx;
  vertical-align: text-bottom;
  border-radius: 0;
  z-index: -10;
}
.center_img{
   100rpx;
  height: 100rpx;
  transform: translate(-50%);
  left: 50%;
  bottom:0;
}
.center-has-noimg{
   100%;
  height: 100%;
}
.center-has-image{
   35rpx;
  height: 35rpx;  
}
.center_part_code{
  padding: 10rpx;
  box-shadow: 0 0 0 #000;
  /*  100rpx;
  height: 100rpx; */
  position: absolute;
  top: -30px;
  z-index: 10;
   106rpx;
  height: 106rpx;
  transform: translate(-50%);
  left: 50%;
}

　　

六、查看效果

发现：view 一直定在下部，滑动的时候不太好看，我这边在 每个switchTab页面的json 中配置了，禁止滚动，在页面内给 父级设置 overflow： scroll，（ switchtab页面为tabBar 中list 配置的页面）

七、总结问题

1. 进入首页，点击其他tab，页面会刷新，tabindex 会再次回到首页

　　解决方案：在每个 switchtab页面 中写入以下 ，（ switchtab页面为tabBar 中list 配置的页面）

  onShow:function (params) {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0  // 数字是当前页面在tabbar的索引,如我的查询页索引是2，因此这边为2，同理首页就为0，消息中心页面为1
      })
    }
  },