【报Bug】nvue 中picker-view mask-style的bug

分类：uni-app

bug已修复

产品分类： uniapp/App

PC开发环境操作系统： Windows

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

HBuilderX版本号： 3.4.11

手机系统：全部

页面类型： nvue

vue版本： vue3

打包方式：云端

项目创建方式： CLI

CLI版本号： 3.0.0-alpha-3041120220520001

测试过的手机：

iphone11

示例代码：

<picker-view  
:mask-style="maskStyle"  
>  

</picker-view>  

maskStyle='background-image: linear-gradient(to bottom,rgba(30, 30, 30, 0.9),rgba(104, 104, 104, 0.6))'  

非nvue  
maskStyle='background-image:linear-gradient(rgba(17, 17, 17, 1.0),rgba(106, 106, 106, 0.2)),linear-gradient(rgba(106, 106, 106, 0.2),rgba(17, 17, 17, 1.0))'

操作步骤：

随便对picker-view定义mask-style样式即可对比发现bug

预期结果：

正常的样式被定义在遮罩上

实际结果：

样式被定义在了中间选区上。

bug描述：

nvue平台：

非nvue平台

非nvue平台结构的代码

NVUE平台weex代码

我们可以发现nvue是分中，上下结构。
而我们的mask-style被应用在了中的结构里面，并非应用在了上下的遮罩上。我觉得应该是像其它平台一样，应用在上下上，才是真的遮罩。而你们有nvue上应用在了中间的那一条上。我不确认这是你们的bug，还是你们有意为之

2022-05-26 22:40 负责人:无分享

4 个回复

最佳回复

DCloud_UNI_LXH

alpha 3.6.7 已修复详情

9***@qq.com

什么时候正式版更新啊

2022-11-02 15:03
slambb

貌似3.6.15 使用 mask-top-style 修改 background-color 也是没效果哦

2023-01-30 17:49

十二112

可以换一种方式实现,用定位盖在蒙层上

<view class="picker">  
    <picker-view class="pickerView" :indicator-style="indicatorStyle" :value="[0]">  
        <picker-view-column class="pickerViewColumn">  
            <view class="item">  
                <text class="itemText">苹果</text>  
            </view>  
            <view class="item">  
                <text class="itemText">香蕉</text>  
            </view>  
            <view class="item">  
                <text class="itemText">梨子</text>  
            </view>  
        </picker-view-column>  
    </picker-view>  
    <view class="pickerMaskTop" :style="{height: `${maskHeight + 1}px`}"></view>  
    <view class="pickerMaskBottom" :style="{height: `${maskHeight + 1}px`}"></view>  
</view>  

indicatorStyle: `height: 50px;`,  
maskHeight: (uni.upx2px(500) - 50) / 2,  

.picker {  
    &View {  
        width: 750rpx;  
        height: 500rpx;  
        &Column {  
            width: 750rpx;  
            height: 500rpx;  
            background-color: #333;  
        }  
    }  
    &Mask {  
        &Top {  
            width: 750rpx;  
            background-image: linear-gradient(to bottom,rgba(17, 17, 17, 0.9),rgba(17, 17, 17, 0.5));  
            position: absolute;  
            top: 0;  
            left: 0;  
        }  
        &Bottom {  
            width: 750rpx;  
            background-image: linear-gradient(to top,rgba(17, 17, 17, 0.9),rgba(17, 17, 17, 0.5));  
            position: absolute;  
            left: 0;  
            bottom: 0;  
        }  
    }  
}  
.item {  
    height: 50px;  
    align-items: center;  
    justify-content: center;  
    &Text {  
        color: #fff;  
    }  
}

上码

这种方式会不会影响上下滑动，视觉上应该可以满足，我晚上回去测试一下

2022-06-15 12:10
十二112

回复上码: 不会影响滑动

2022-06-15 13:46
上码

回复 1***@qq.com: 好的谢谢

2022-06-15 14:07
十二112

回复上码: 不客气

2022-06-15 14:23
同名自定义 (作者)

回复 1***@qq.com: 这种定位式的覆盖，应该是可以用。就是底部的文字变得暗淡了，因为被盖了二层。免费可以用吧。官方未修复前只能这么用了。

2022-06-16 17:27
十二112

回复同名自定义: 嗯嗯,效果上还是可以的

2022-06-17 09:14
同名自定义 (作者)

回复 1***@qq.com: 提醒下各位：在ios下需要把遮罩事件改为fase会阻止滑动功能。

2022-06-18 19:50