uni-app 安卓input的placeholder层级高于button

uni-app 安卓input的placeholder层级高于button

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

产品分类：uniapp/小程序/微信

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.22

第三方开发者工具版本号：1.05

基础库版本号：2.18.1

操作步骤：

<cover-view class="btn-wrap">  
    <button class="btn cancel" @tap="reset">重置</button>  
    <button class="btn confirm" @tap="confirm">  
        确定  
        <cover-view class="total">(共{{ count }}个)</cover-view>  
    </button>  
</cover-view>  

<style lang="scss" scoped>  

.btn-wrap {  
    position: fixed;  
    left: 0rpx;  
    right: 0rpx;  
    bottom: 0rpx;  
    background-color: #ffffff;  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    height: 80rpx;  
    line-height: 80rpx;  
    .btn {  
        text-align: center;  
        height: 80rpx;  
        line-height: 80rpx;  
        flex: 1;  
        font-size: 32rpx;  
        border-radius: 0rpx;  
        &::after {  
            border-radius: 0rpx;  
            border: 2rpx solid #f1f2f3;  
        }  
        .total {  
            font-size: 24rpx;  
        }  
        &.cancel {  
            color: $u-type-primary;  
        }  
        &.confirm {  
            background-color: $u-type-primary;  
            color: #ffffff;  
        }  
    }  
}  
</style>

预期结果：

<p>cover-view中的元素能和view中一样布局</p>

实际结果：

<p>cover-view中的button文字不能在安卓微信小程序中垂直居中</p>

bug描述：

<p>在安卓微信7.0.22版本中input的placeholder高于了button，cover-view中的button文字不能垂直居中：对cover-view试过了flex布局align-items:center，也试过height和line-height都不行</p>

更多关于uni-app 安卓input的placeholder层级高于button的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 安卓input的placeholder层级高于button的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的微信小程序原生组件层级问题。在微信小程序中，input、textarea、video等原生组件的层级最高，会覆盖在普通组件之上。cover-view和cover-image是专门为解决此问题设计的组件，它们可以覆盖在原生组件之上。

从你的代码看，问题可能出在以下几个方面：

  1. 层级覆盖问题：如果页面中有input组件，其placeholder确实会显示在普通button之上。你使用cover-view包裹button是正确的做法，但需要确保cover-view的z-index设置足够高。

  2. 安卓微信小程序中的布局问题：cover-view在安卓微信小程序中确实存在一些布局限制。对于button在cover-view中无法垂直居中的问题，可以尝试以下解决方案：

<cover-view class="btn-wrap">  
    <cover-view class="btn cancel" @tap="reset">
        <text>重置</text>
    </cover-view>  
    <cover-view class="btn confirm" @tap="confirm">  
        <text>确定</text>
        <cover-view class="total">(共{{ count }}个)</cover-view>  
    </cover-view>  
</cover-view>

.btn-wrap {
    /* 原有样式保持不变 */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    width: 100%;
    /* 其他样式 */
}

.btn text {
    line-height: normal;
}
回到顶部