收藏
回答

自定义tabBar,在长列表需要网络加载时上拉加载出现bar上移,如何解决?

因为需要网络加载才能复现,所以暂时贴不了代码

最后一次编辑于  09-15
回答关注问题邀请回答
收藏

4 个回答

  • lxin.
    lxin.
    10-29

    首先  我也出现了如此问题,暂时使用view和image替代了 cover-    ,顺便补充一下问题,(个别iPhone6    所有iPhoneX系列可复现),

    1. 在toast期间,滑动屏幕  tabbar也会动,

    2. 当你首页滑动一定高度后(大于半屏)  , 切换页面   ,再切换回来,tabbar下移大概100px

      希望官方看到吧,此外,cover-view先渲染出来后会被后出来的canvas覆盖

    10-29
    赞同 1
    回复
  • 铭锋科技
    铭锋科技
    09-15

    谢邀,一般没代码不好答,网络数据回答问题的人可以模拟

    09-15
    赞同
    回复
  • 乔灵
    乔灵
    09-15


    09-15
    赞同
    回复 6
    •      
           
      09-19
      楼主解决了吗?现在我也出现这个问题了
      09-19
      回复
    • 乔灵
      乔灵
      09-22回复     
      暂时解决了,我猜测是微信同层渲染没做好,我弃用cover-view了,改成view就行,不过需要关注view和tabbar相关页面的原生组件的层级问题(如果你的页面有原生组件的话)
      09-22
      1
      回复
    • 乔灵
      乔灵
      09-22回复     
      如果没有原生组件,那就放心大胆的把cover-view 整体替换成view吧
      09-22
      回复
    •      
           
      09-23回复乔灵
      那你这个就是把原生的tabbar隐藏,自己用view重新写的?
      09-23
      回复
    • 乔灵
      乔灵
      09-23回复     
      不是啊,app.json,配置自定义tabbar,具体看微信开发文档
      09-23
      回复
    查看更多(1)
  • 少年啦
    少年啦
    09-15

    使用cover-view做bar的外层布局,放置在整个布局的最外层

    09-15
    赞同
    回复 10
    • 乔灵
      乔灵
      09-15
      现在就是cover-view
      09-15
      回复
    • 少年啦
      少年啦
      09-15回复乔灵
      样式看看
      09-15
      回复
    • 乔灵
      乔灵
      09-15
      <cover-view class="tab-bar {{darkMode?'darkMode':'dayMode'}}">
        <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
          <cover-image src="{{icons[index]}}"></cover-image>
          <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
        </cover-view>
      </cover-view>


      09-15
      回复
    • 乔灵
      乔灵
      09-15回复少年啦
      .tab-bar {
          position: fixed;
          bottom: env(safe-area-inset-bottom);
          left: 50rpx;
          right: 50rpx;
          height: 48px;
          width: 650rpx;
          display: flex;
          border-radius: 24px;
          border: 2rpx solid #888;
        }
       
        .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;
        }
       
      .darkMode {
        background-color: black;
      }
      .dayMode {
        background-color: white;
      }


      09-15
      回复
    • 乔灵
      乔灵
      09-15回复少年啦
      就是正常fixed
      09-15
      回复
    查看更多(5)
问题标签