微信小程序自定义tabbar（官方custom...

孤风卓影 2022-06-13 发布于河南

展开全文

首先我们先看一下具体功能

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

 "tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/main-HY/index",
      "text": "货源",
      "iconPath": "/images/tabbar/货源icon48＊48@2x.png",
      "selectedIconPath": "/images/tabbar/货源icon@2x.png"
    },
    {
      "pagePath": "pages/main-SXY/index",
      "text": "商学院",
      "iconPath": "/images/tabbar/商学院icon@2x.png",
      "selectedIconPath": "/images/tabbar/商学院icon48＊48@2x.png"
    },
    {
      "pagePath":  "pages/main-DZZX/index",
      "text": "店主中心",
      "iconPath": "/images/tabbar/店主中心icon@2x.png",
      "selectedIconPath": "/images/tabbar/店主中心icon48＊48@2x.png"
    }]
  },

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

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

<!--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">
		<view class="center_part" wx:if="{{item.iconPath}}">
			<image class="center_img center-has-noimg" src=""></image>
			<image class="center_img center-has-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}">
			</image>
		</view>
		<view class="txt fontWeight bg_rec" wx:if="{{selected === index}}">
			{{item.text}}
		</view>
		<view class="txt " wx:if="{{selected != index}}">{{item.text}}</view>
	</view>
</view>

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

// custom-tab-bar/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的初始数据
   */
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#FF1C6C",
    "list": [{
        "pagePath": "/pages/main-HY/index",
        "text": "货源",
        "iconPath": "/images/tabbar/货源icon48＊48@2x.png",
        "selectedIconPath": "/images/tabbar/货源icon@2x.png"
      },
      {
        "pagePath": "/pages/main-SXY/index",
        "text": "商学院",
        "iconPath": "/images/tabbar/商学院icon@2x.png",
        "selectedIconPath": "/images/tabbar/商学院icon48＊48@2x.png"
      },
      {
        "pagePath": "/pages/main-DZZX/index",
        "text": "店主中心",
        "iconPath": "/images/tabbar/店主中心icon@2x.png",
        "selectedIconPath": "/images/tabbar/店主中心icon48＊48@2x.png"
      }
    ]
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // switchTab(e) {
    //   const idx = e.currentTarget.dataset.index
    //   const path = e.currentTarget.dataset.path
    //   this.setData({
    //     selected: idx
    //   })
    //   if (this.data.selected==0) {
    //     wx.switchTab({
    //       url: '/pages/main-HY/index',
    //     })
    //   }else if(this.data.selected==1){
    //     wx.switchTab({
    //       url: '/pages/main-SXY/index',
    //     })
    //   }else{
    //     wx.switchTab({
    //       url: '/pages/main-DZZX/index',
    //     })
    //   }
    //   console.log(this.data.selected, idx)
    // },
    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 写入

/* custom-tab-bar/index.wxss */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150rpx;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 30rpx 30rpx 0 0;
  border-top: 1px solid #eaeaea;
  z-index: -1;
}
.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.tab-bar-item cover-image {
  width: 27rpx;
  height: 27rpx;
}
.tab-bar-item cover-view {
  font-size: 10rpx;
}
.txt{
  font-size: 24rpx;
  color: #333333;
}
.fontWeight{
  font-weight: bold;
}
.bg_rec{
  font-size: 24rpx;
  color: #FF5224;
}
.center_img{
  width: 46rpx;
  height: 44rpx;
  /* position: fixed; */
  transform: translate(-50%);
  /* left: 50%; */
}
.center-has-noimg{
  bottom: 26rpx;
  z-index: 10;
}
.center-has-image{
  bottom: 20rpx;
  z-index: 11;
}
.transcribe{
  width: 750rpx;
height: 288rpx;
background: #FFFFFF;
position:fixed;
bottom: 0;
display: none;
}
.switchover{
  background:#fff;
  width: 100%;
  height: 288rpx;
  background: #FFFFFF;
}
/* .switchover{
  border: 1rpx solid red;
} */
.switchover-img{
  height: 144rpx;
  margin-top: 30rpx;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.switchover-icon{
  width:124rpx;
  height:124rpx;
}
.disagreement{
width:22rpx;
height:22rpx;
}
.disagreement-pris{
text-align: center;
}

六、总结踩过的坑

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
    })
  }
},