收藏
回答

自定义tabbar page样式溢出?

自定义了一个tabbar,通过hidden来控制隐藏与否,可是组件1(compo)的page样式会溢出到组件2(compo2),并且修改组件2的page样式也依然被组件1的page样式覆盖。请大神看看为什么?谢谢!(用了styleIsolation:'isoloated' 没有效果)


compo

compo
------------------
page{
  background-color: yellow;
}

compo2

compo2
------------------
page{
  background-color: red;
}

page的WXML

<view hidden="{{mIndex==1?false:true}}"><compo /></view>
<view hidden="{{mIndex==2?false:true}}"><compo2 /></view>
<view hidden="{{mIndex==3?false:true}}"><compo3 /></view>

<view class="box">
  <view class="para {{mIndex==1?'active':'default'}}" bindtap="btn"></view>
  <view class="para {{mIndex==2?'active':'default'}}" bindtap="btn2"></view>
  <view class="para {{mIndex==3?'active':'default'}}" bindtap="btn3"></view>
</view>

------------------------------------------------------------------------------
Page({
  data: {
    mIndex: 1
  },

  btn() {
    console.log('btn')
    this.setData({
      mIndex: 1
    })
  },

  btn2() {
    console.log('btn2')
    this.setData({
      mIndex: 2
    })
  },

  btn3() {
    console.log('btn3')
    this.setData({
      mIndex: 3
    })
  },
})
------------------------------------------------------------------------------
.box{
  position: fixed;
  display: flex;
  bottom: 0;
  height: 100rpx;
  width: 100%;
  border-top: 1rpx solid black;
  z-index: 1;
  background: white;
}

.para{
  text-align: center;
  flex:1;
  line-height: 100rpx;
}

.active{
  color: red;
}

.default{
  color: black;
}
最后一次编辑于  02-03
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容
问题标签