uniapp 微信小程序 uview u-picker和u-action-sheet的层级问题/解决覆盖问题

公孙元二

已于 2022-05-13 16:06:28 修改

阅读量4.3k

点赞数

分类专栏：微信小程序/开发者工具/uniapp/HBuilder 文章标签：微信小程序前端 css

于 2022-05-13 16:05:20 首次发布

本文链接：https://blog.csdn.net/amnesiac666/article/details/124753919

版权

在uniapp微信小程序开发中遇到u-action-sheet与u-picker层级问题，当同时弹出时u-picker会被遮盖。解决方法是将两者放入同一定位容器，并调整z-index。此外，利用v-if可临时隐藏组件处理其他覆盖问题。

摘要由CSDN通过智能技术生成

我的场景：
点击按钮拉起u-action-sheet，此时再点击按钮拉起u-picker，结果发现u-picker在u-action-sheet的下面，被遮盖了。

解决方案：
给他们包裹一层容器，给他们的容器设置定位和层级。

<template style="position: absolute;z-index: 100;" v-if="isShowPageRangeComponent">
	<u-picker ref="uPicker" class="picker-height" :immediateChange="true" :defaultIndex="defaultIndexArr" @change="changeHandler" @confirm="agreePrintRangeHandle" @cancel="isShowPageRangeComponent=false" @close="isShowPageRangeComponent=false" :show="isShowPageRangeComponent" :columns="columns" :closeOnClickOverlay="true"></u-picker>
</template>

<view style="position: absolute;z-index: 10;">
    <u-action-sheet
style="z-index: 10;"
        :closeOnClickOverlay="true"
        :closeOnClickAction="true"
        :showMessageCard="true"
        @close="closePrintParamDlg"
        :actions="list"
        title="配置文件打印参数"
        round="20"
        :show="isShowPrintParamDialog"
    >
        <div class="printParamDialog">
            <view class="form-item" style="display: flex;justify-content:space-between;">
                <view style="white-space:nowrap;padding-right:20rpx;"