你中间突出的tab 怎么实现的?是写一个tabBar 然后需要底部导航的页面引入吗,小程序自定义的底部导航可以实现吗 ?
自定义tabbar中间凸起部分的圆弧怎么做出来?[图片][图片] 自定义的tabbar,中间凸起部分的圆弧怎么做出来?如图二是想要实现的效果,图一中红色框的圆弧要怎么实现? wxml代码 <view class="tab-bar"> <view class="tab-bar-border"></view> <view class="tab-bar-item" wx:for="{{selectList}}" wx:key="index" data-index="{{index}}" data-path="{{item.pagePath}}" data-selected="{{item.selected}}" bindtap="onwidthTap"> <image class="cover-image" src="{{selected === item.selected ? item.selectedIconPath : item.iconPath}}"></image> <view class="cover-view" style="color:{{selected === item.selected ? selectedColor : color}}">{{item.text}}</view> </view> </view> <view class="indicator"> <view class="indicator-border"></view> <view class="indicator-item"> <image class="indicator-image" src="/images/jia.png"></image> </view> <view class="indicator-item-text">发布</view> </view> wxss代码 .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 120rpx; background-color: white; display: flex; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 0 5rpx 0 rgba(0, 0, 0, 0.33); } .tab-bar-item { flex: 1; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .cover-image { margin-bottom: 40rpx; width: 44rpx; height: 44rpx; } .tab-bar-item .cover-view { font-size: 34rpx; position: absolute; bottom: 10rpx; color: #7A7E83; } .indicator { height: 70rpx; display: flex; flex-direction: column; align-items: center; } .indicator-border { position: absolute; left: 50%; top: -50rpx; transform: translate(-50%, -50%); border-radius: 50%; width: 80rpx; height: 80rpx; border: 7px solid #fff; box-shadow: 0 0 5rpx 0 rgba(0, 0, 0, 0.33); z-index: -1; } .indicator-item { position: absolute; left: 50%; top: -50rpx; transform: translate(-50%, -50%); background: #ff9f7f; border-radius: 50%; width: 80rpx; height: 80rpx; display: flex; flex-direction: column; justify-content: space-between; align-items: center; border: 7px solid #fff; z-index: 1; } .indicator-image { width: 80rpx; height: 80rpx; border-radius: 50%; } .indicator-item-text { font-size: 34rpx; z-index: 1; color: #7A7E83; position: absolute; bottom: 10rpx; }
05-27请问你这个中间凸起的tab是怎么实现的? 我使用cover-view和view , position: absolute或者fixed, z-index: 99999999;都盖不住底部导航
视频全屏盖不住tabbar,安卓的没有问题用的是自定义tabbar [图片]
05-27