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;
}
相关推荐
2501_915909064 小时前
Charles中文版使用教程 高效抓包与API调试常见问题处理
android·ios·小程序·https·uni-app·iphone·webview
jingling5557 小时前
UniApp 实现顶部固定导航栏 Tab 及滚动变色效果
前端·javascript·前端框架·uni-app
The_era_achievs_hero7 小时前
UniappDay06
开发语言·javascript·uni-app
00后程序员张8 小时前
iOS软件性能监控实战指南 开发到上线的完整流程解析
android·ios·小程序·https·uni-app·iphone·webview
icebreaker12 小时前
weapp-tailwindcss 已支持 uni-app x 多端构建
前端·javascript·uni-app
2501_916007472 天前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915918412 天前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview
HebyH_2 天前
uniapp如何封装uni.request 全局使用
uni-app
随笔记3 天前
uniapp蓝牙连接设备并发送接收信息
javascript·uni-app·app
脑袋大大的3 天前
从“PPT动画”到“丝滑如德芙”——uni-app x 动画性能的“终极奥义”
前端·javascript·nginx·uni-app·uniapp·app开发·混合开发