收藏
回答

使用自定义tabbar上下滑动页面时会tabbar跑下去 ipx6机型?

很急求官方给回应
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默认样式 */

button {
  font-size: 0;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0 0 0;
  border-radius: 0;
}

button::after {
  border: none;
}


回答关注问题邀请回答
收藏

1 个回答

  • 疯狂的小辣椒
    疯狂的小辣椒
    2020-03-19

    提供能复现问题的简单代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    出现问题的手机扫码提供下扫码结果截图

    

    2020-03-19
    有用
    回复 9
    • 我叫卜前程
      我叫卜前程
      2020-03-19
      您好,我这边看下来 不是同一个问题,初步确认应该是我页面中用了scroll-view局部滑动导致底部tabbar下移的
      2020-03-19
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2020-03-19回复我叫卜前程
      (⊙o⊙)…你这个是贴底部了,我修改了回复,辛苦按照提示来补全信息,我们看下。
      2020-03-19
      回复
    • 我叫卜前程
      我叫卜前程
      2020-03-20回复疯狂的小辣椒
      现在确定的原因是:
      1:页面中使用了scroll-view组件,并且scroll-view组件是在页面的最下面,且scroll-view所在的位置会触碰到底部的自定义tabbar同时scroll-view组件做了上拉分页
      2:当滑动页面其他部分,scroll-view碰到了底部tabbar,tabbar就跑到下面去了
      不知道这些信息是否对您有用,
      现在解决的方法是 我试着在页面中加了一个page标签包裹页面中的所有元素,标签的高度等于 系统获取的屏幕高度减去底部tabbar的高度,这样就不会有问题了,不过需要确认  page标签在wxml中是不是可以使用
      2020-03-20
      回复
    • 我叫卜前程
      我叫卜前程
      2020-03-20回复疯狂的小辣椒
      2020-03-20
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2020-03-20回复我叫卜前程
      可以使用的
      2020-03-20
      回复
    查看更多(4)
登录 后发表内容
问题标签