
- 发布:2022-05-26 22:40
- 更新:2022-10-18 14:39
- 阅读:662
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX版本号: 3.4.11
手机系统: 全部
页面类型: nvue
vue版本: vue3
打包方式: 云端
项目创建方式: CLI
CLI版本号: 3.0.0-alpha-3041120220520001
测试过的手机:
示例代码:
<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="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
随便对picker-view定义mask-style样式即可对比发现bug
预期结果:
正常的样式被定义在遮罩上
正常的样式被定义在遮罩上
实际结果:
样式被定义在了中间选区上。
样式被定义在了中间选区上。
bug描述:
nvue平台:
非nvue平台
非nvue平台结构的代码
NVUE平台weex代码
我们可以发现nvue是分中,上下结构。
而我们的mask-style被应用在了中的结构里面,并非应用在了上下的遮罩上。我觉得应该是像其它平台一样,应用在上下上,才是真的遮罩。而你们有nvue上应用在了中间的那一条上。我不确认这是你们的bug,还是你们有意为之
最佳回复

可以换一种方式实现,用定位盖在蒙层上
<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;
}
}
-
-
-
-
-
同名自定义 (作者)
回复 1***@qq.com: 这种定位式的覆盖,应该是可以用。就是底部的文字变得暗淡了,因为被盖了二层。免费可以用吧。官方未修复前只能这么用了。
2022-06-16 17:27
-
-
9***@qq.com
什么时候正式版更新啊
2022-11-02 15:03
slambb
貌似3.6.15 使用 mask-top-style 修改 background-color 也是没效果哦
2023-01-30 17:49