微信小程序自定义特殊凸起tabbar

效果图:

描述：

实现自定义的tab栏，点击 【教辅】、【我的】就切换tab，底部还会显示tabBar，但是点击中间的【福】，需要跳到新的页面。

坑1：

（1）在custom-tab-bar/index里面是无法wx.navigateTo跳转的，只能使用switchTab。那么我们的【福】要怎样跳转呢。在app.json里面的tabbar 里面的list里去掉关于【福】的相关pagePath等配置。

相关代码如下：

（1）在根目录下新建文件：

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

（2）在app.json里面配置：

"tabBar": {
    "custom": true,    // 自定义的，必须设置奥
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/bar/teach/teach-assistant",
        "text": "教辅"
      },
      {
        "pagePath": "pages/bar/my/my",
        "text": "我的"
      }
    ]

（3）自定义的tabBar    custom-tab-bar/index.js

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#666666",
    fontWeight:'bold',
    list: [
      {
        pagePath: "/pages/bar/teach/teach-assistant",
        text: "教辅",
        isSpecial:false
      },
      {
        pagePath: "/pages/bar/bless/bless",
        iconPath: "/images/icon/fu.png",
        selectedIconPath: "/images/icon/fu.png",
        text: "",
        isSpecial: true
      },
      {
        pagePath: "/pages/bar/my/my",
        text: "我的",
        isSpecial: false
      }
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const idx = e.currentTarget.dataset.index
      const path = e.currentTarget.dataset.path
      this.setData({
        selected: idx
      })
      if (this.data.list[idx].isSpecial){
        wx.navigateTo({
          url: path,
        })
        console.log(path)
      }else{
        wx.switchTab({
          url: path,
        })
      }
      console.log(this.data.selected, idx);
    }
  }
})

自定义的tabBar    custom-tab-bar/index.json

{
  "component": true
}

自定义的tabBar    custom-tab-bar/index.wxml

<!-- 自定义tab -->
<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="../images/icon/fu-top.png"></image>
      <image class="center_img center-has-image" src="{{item.iconPath}}"></image>
    </view>
    <view class="txt fontWeight" wx:if="{{selected === index}}" style="color: {{selected === index ?selectedColor : color}}">
      {{item.text}}
      <view class="bg_rec"></view>
    </view>
    <view class="txt" wx:if="{{selected != index}}">{{item.text}}</view>
  </view>
</view>

自定义的tabBar    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: 27px;
  height: 27px;
}
.tab-bar-item cover-view {
  font-size: 10px;
}
.txt{
  font-size: 40rpx;
  color: #aaaaaa;
}
.fontWeight{
  font-weight: bold;
}
.bg_rec{
  background: #ffd324;
  width: 80rpx;
  min-height: auto;
  height: 20rpx;
  margin-top: -28rpx;
  vertical-align: text-bottom;
  border-radius: 0;
  z-index: -10;
}
.center_img{
  width: 120rpx;
  height: 120rpx;
  position: fixed;
  transform: translate(-50%);
  left: 50%;
  bottom:0;
}
.center-has-noimg{
  bottom: 26px;
  z-index: 10;
}
.center-has-image{
  bottom: 20px;
  z-index: 11;
}

（4）在tabBar跳转的页面，也就是tab 选中状态下，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。

const app = getApp()
Page({
  data: {
  },
  onShow(){
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 2    // 根据tab的索引值设置
      })  
    }
  }
})

以上是 微信小程序自定义特殊凸起tabbar 的全部内容， 来源链接： utcz.com/a/16683.html

回到顶部