uni-app的内置组件button的层级在手机端safari浏览器中高于uni-datetime-picker组件 修改button的z-index层级无效

uni-app的内置组件button的层级在手机端safari浏览器中高于uni-datetime-picker组件 修改button的z-index层级无效

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：

uniapp/H5

浏览器平台：

Safari

浏览器版本：

最新版

示例代码：

<view class="page task-pageAddEdit-page" :style="{ height: contentHeight + 'px' }">
<scroll-view class="scroll-from" scroll-y>
<view class="form-bg-item">
<view class="label required">{{ $t('staff.task.add.key_RWRQ') }}</view> 
<uni-datetime-picker  
    hide-second  
    v-model="form.datetimerange"  
    type="datetimerange"  
    @change="handleDateChange"  
>
    <view class="uni-input choose-input" v-if="form.startTime"
        >{{ form.startTime }} - {{ form.endTime }}</view  
    >
    <view class="uni-input choose-input choose-input-placeholder" v-else>
        {{ $t('common.placeholder_choose') }}
    </view>
</uni-datetime-picker>
</view>
</scroll-view>
<view>
<button size="default" type="default" style="position: relative; z-index: 1" hover-class="is-hover">
按钮
</button>
</view>
</view>

操作步骤：

<view class="page task-pageAddEdit-page" :style="{ height: contentHeight + 'px' }">
<scroll-view class="scroll-from" scroll-y>
<view class="form-bg-item">
<view class="label required">{{ $t('staff.task.add.key_RWRQ') }}</view> 
<uni-datetime-picker  
    hide-second  
    v-model="form.datetimerange"  
    type="datetimerange"  
    @change="handleDateChange"  
>
    <view class="uni-input choose-input" v-if="form.startTime"
        >{{ form.startTime }} - {{ form.endTime }}</view  
    >
    <view class="uni-input choose-input choose-input-placeholder" v-else>
        {{ $t('common.placeholder_choose') }}
    </view>
</uni-datetime-picker>
</view>
</scroll-view>
<view>
<button size="default" type="default" style="position: relative; z-index: 1" hover-class="is-hover">
按钮
</button>
</view>
</view>

更多关于uni-app的内置组件button的层级在手机端safari浏览器中高于uni-datetime-picker组件 修改button的z-index层级无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你好 可以发一个完整可运行的项目示例吗？

更多关于uni-app的内置组件button的层级在手机端safari浏览器中高于uni-datetime-picker组件 修改button的z-index层级无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在移动端Safari中常见的层级渲染问题。button组件在Safari中默认具有较高的渲染层级，即使设置了较低的z-index也可能无法解决。

解决方案：

  1. 调整DOM结构：将button组件移到uni-datetime-picker之前，利用文档流顺序解决层级问题。

  2. 使用view模拟button：用view组件配合样式模拟按钮效果，避免原生button的层级问题：

<view class="custom-btn" @click="handleClick">按钮</view>
  1. 强制提升picker层级：为uni-datetime-picker的弹出层设置更高的z-index：
.uni-date-picker-container {
  z-index: 9999 !important;
}
回到顶部