1***@qq.com
1***@qq.com
  • 发布:2025-11-11 10:49
  • 更新:2025-11-11 10:49
  • 阅读:10

【报Bug】picker-view的mask-style设置background时,文字被隐藏

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 4.45

手机系统: iOS

手机系统版本号: iOS 17

手机厂商: 苹果

手机机型: iPhone15

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<picker-view class="u-picker__view" :indicatorStyle="height: ${addUnit(itemHeight, 'px')};" value="innerIndex" mask-style="background:#141823" :immediateChange="immediateChange" :style="{ height: ${addUnit(visibleItemCount * itemHeight, 'px')}
}" @change="changeHandler">
<picker-view-column v-for="(item, index) in innerColumns" :key="index"
class="u-pickerviewcolumn">
<view v-if="testArray(item)" class="u-pickerviewcolumn__item u-line-1" class="[index1 === innerIndex[index] && 'u-pickerviewcolumn__item--selected']" v-for="(item1, index1) in item" :key="index1" :style="{
height: addUnit(itemHeight, 'px'),
lineHeight: addUnit(itemHeight, 'px'),
fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal',
display: 'block',
}">{{ getItemText(item1) }}</view>
</picker-view-column>
</picker-view>

操作步骤:
<picker-view class="u-picker__view" :indicatorStyle="height: ${addUnit(itemHeight, 'px')};" value="innerIndex" mask-style="background:#141823" :immediateChange="immediateChange" :style="{ height: ${addUnit(visibleItemCount * itemHeight, 'px')}
}" @change="changeHandler">
<picker-view-column v-for="(item, index) in innerColumns" :key="index"
class="u-pickerviewcolumn">
<view v-if="testArray(item)" class="u-pickerviewcolumn__item u-line-1" class="[index1 === innerIndex[index] && 'u-pickerviewcolumn__item--selected']" v-for="(item1, index1) in item" :key="index1" :style="{
height: addUnit(itemHeight, 'px'),
lineHeight: addUnit(itemHeight, 'px'),
fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal',
display: 'block',
}">{{ getItemText(item1) }}</view>
</picker-view-column>
</picker-view>

预期结果:

只设置背景颜色为#141823,不影响文字显示

实际结果:

mask-style设置background背景颜色时,会把每项item的文字给挡住,看不到文字。

bug描述:

使用picker-view选择器,在mask-style设置background背景颜色时,会把每项item的文字给挡住。

2025-11-11 10:49 负责人:无 分享
已邀请:

要回复问题请先登录注册