page-container 组件的无法覆盖问题和动画问题
发布于 4 年前 作者 ncheng 401 次浏览 来自 官方Issues
// wxml
<button class="btn" bindtap="popup" >底部弹出</button>
<view class="a">xxxxx</view>
<page-container show="{{show}}" bindenter="onEnter" > <view class="detail-page"></view> </page-container>
<view class="a">xxxxx</view>
// wxss
.detail-page { min-height: 500px; position: relative; z-index: 100 }
.a { font-size: 300rpx; margin-top: 100rpx; position: relative; z-index: 0 }
// js
Page({
  data: { show: false, },
  popup() { this.setData({ show: true, }) },
})

page-container组件与其他组件同层级,但是设置了z-index却还是无法覆盖位于后面的开启了定位的组件。
只能通过在wxml中将其置于最后,才能覆盖前面的开启了定位的组件
还有,如果没有添加onEnter,那么page-container出现时将不会有过渡动画
回到顶部