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

想要实现的效果、

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

小程序弹出框是没办法遮挡住底部的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;
}
相关推荐
fakaifa16 分钟前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
七七小报17 分钟前
uniapp-商城-34-shop 购物车 选好了 进行订单确认
uni-app
万岳软件开发小城4 小时前
基于PHP+Uniapp的互联网医院源码:电子处方功能落地方案
开发语言·uni-app·php·软件开发·互联网医院系统源码·智慧医院app
anyup1 天前
uni-app 蓝牙打印:实现数据分片传输机制
前端·uni-app·trae
fakaifa1 天前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
Monly211 天前
Uniapp:navigator(页面跳转)
uni-app
Monly212 天前
Uniapp:swiper(滑块视图容器)
uni-app
七七小报2 天前
uniapp-商城-32-shop 我的订单-订单详情和组件goods-list
uni-app
Monly212 天前
Uniapp:view容器(容器布局)
uni-app
上趣工作室2 天前
uniapp开发2--uniapp中的条件编译总结
uni-app