uni-app如果自定义tabbar实现底部样式有凸起效果，背景带圆角

夏天想2024-09-29 16:43

想要实现的效果、

大部分可以参考这一篇文章

小程序弹出框是没办法遮挡住底部的tabbar的，解决的办法是使用自定义tabbar。。uni-app小程序如何自定义tabbar-CSDN博客

我们只要改下index.wxml和index. wxs的代码就行了

复制代码

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

复制代码

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96rpx;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius:32rpx 32rpx 0 0;
  padding-top:22rpx;
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2rpx;
  transform: scaleY(0.5);
}

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

.tab-bar-item .item-image {
  width: 46rpx;
  height: 46rpx;
  position: absolute;
  top: 0;
}
.tab-bar-item .special-image {
  position: absolute;
  top: -50rpx;
  left: 35rpx;
  width: 150rpx;
  height: 150rpx;
  text-align: center;
  box-sizing: border-box;
}
.tab-bar-item .special-image .special-image-pic {
  width: 100%;
  height: 100%;
}

.tab-bar-item .tab-text {
  margin-top: 4rpx;
}

.tab-bar-item .special-text {
  margin-top: 44rpx
}

.tab-bar-item .tab-text {
  font-size: 28rpx;
  position:absolute;
  bottom:0;
}