uni-app uni-easyinput 在深色背景下 使用带透明度的背景颜色input会出现左右两边颜色不一致情况

uni-app uni-easyinput 在深色背景下 使用带透明度的背景颜色input会出现左右两边颜色不一致情况

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

操作步骤：

<uni-easyinput v-model="value" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入内容" @input="input"> </uni-easyinput>  
data() {  
    return {  
        value: '',  
        password: '',  
        placeholderStyle: "color:#2979FF;font-size:14px",  
        styles: {  
              backgroundColor: '#FFFFFF1A',  
              borderRadius: '16rpx',  
        }  
    }  

},  
.live {  
    height: 100vh;  
    width: 100%;  
    background-color: #000000 !important;  
}

预期结果：

  • input 背景色为#FFFFFF1A

实际结果：

  • 部分input 为#FFFFFF1A

bug描述：

uni-easyinput 在深色背景下 使用带透明度的背景颜色input会出现左右两边颜色不一致情况

image


更多关于uni-app uni-easyinput 在深色背景下 使用带透明度的背景颜色input会出现左右两边颜色不一致情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni-easyinput 在深色背景下 使用带透明度的背景颜色input会出现左右两边颜色不一致情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的渲染问题，主要出现在iOS设备上。当uni-easyinput组件使用带透明度的背景色时，由于系统渲染机制差异，可能导致左右边缘颜色不一致。

解决方案：

  1. 使用不透明背景色
styles: {
    backgroundColor: '#2A2A2A', // 替换为不透明的深色
    borderRadius: '16rpx',
}
  1. 通过外层容器实现透明度效果
<view class="input-wrapper">
    <uni-easyinput v-model="value" :styles="styles" placeholder="请输入内容">
    </uni-easyinput>
</view>

<style>
.input-wrapper {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16rpx;
}
.input-wrapper .uni-easyinput__content {
    background: transparent !important;
}
</style>
  1. 使用CSS变量适配深色模式
:root {
    --input-bg: rgba(255, 255, 255, 0.1);
}
[@media](/user/media) (prefers-color-scheme: dark) {
    :root {
        --input-bg: #2A2A2A;
    }
}
回到顶部