
很急求官方给回应
wxml:
<cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view>
<block wx:for="{{list}}" wx:key="index">
<cover-view wx:if="{{index<3}}" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}}">
{{item.text}}
</cover-view>
</cover-view>
<block wx:else>
<cover-view wx:if="{{hasUserInfo}}" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}}">
{{item.text}}
</cover-view>
</cover-view>
<button wx:else open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" hover-class="none" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}">
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}}">
{{item.text}}
</cover-view>
</button>
</block>
</block>
</cover-view>
css:
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: #181b24;
padding: 4rpx 0 4rpx 0;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
background-color: rgba(0, 0, 0, 0.33);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
}
.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;
}
button wx-cover-view {
line-height: 1.2;
}
button {
font-size: 0;
background-color: transparent;
border: none;
padding: 0;
margin: 0 0 0;
border-radius: 0;
}
button::after {
border: none;
}
提供能复现问题的简单代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
出现问题的手机扫码提供下扫码结果截图
1:页面中使用了scroll-view组件,并且scroll-view组件是在页面的最下面,且scroll-view所在的位置会触碰到底部的自定义tabbar同时scroll-view组件做了上拉分页
2:当滑动页面其他部分,scroll-view碰到了底部tabbar,tabbar就跑到下面去了
不知道这些信息是否对您有用,
现在解决的方法是 我试着在页面中加了一个page标签包裹页面中的所有元素,标签的高度等于 系统获取的屏幕高度减去底部tabbar的高度,这样就不会有问题了,不过需要确认 page标签在wxml中是不是可以使用