小书1998
小书1998
  • 发布:2025-11-25 15:32
  • 更新:2025-11-25 16:37
  • 阅读:16

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

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 4.86

浏览器平台: Safari

浏览器版本: 最新版

项目创建方式: HBuilderX

示例代码:

<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>
<!-- <LockButton :onClick="handleSave">{{ $t('staff.task.add.submit') }}</LockButton> -->
<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>
<!-- <LockButton :onClick="handleSave">{{ $t('staff.task.add.submit') }}</LockButton> -->
<button size="default" type="default" style="position: relative; z-index: 1" hover-class="is-hover">
按钮
</button>
</view>
</view>

预期结果:

uni-datetime-picker的层级高于button的层级

实际结果:

button的层级高于uni-datetime-picker的层级

bug描述:

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

2025-11-25 15:32 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

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

要回复问题请先登录注册