tmui
tmui
  • 发布:2022-05-26 22:40
  • 更新:2024-04-11 18:17
  • 阅读:1201

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

分类:uni-app

产品分类: 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 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_LXH

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

十二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

  • tmui (作者)

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

    2022-06-16 17:27

  • 十二112

    回复 tmui: 嗯嗯,效果上还是可以的

    2022-06-17 09:14

  • tmui (作者)

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

    2022-06-18 19:50

上码

上码

遇到同样问题 nvue暗色主题下 这个组件完全不能用

  • 十二112

    试试下面的方法

    2022-06-15 10:12

DCloud_UNI_LXH

DCloud_UNI_LXH

由于 nvue 无法使用一个 background-image 属性,因此现增加两个属性 maskTopStyle、maskBottomStyle 来分别设置 mask。预计下版修复

  • 4***@qq.com


    你好,能提供一个设置maskTopStyle、maskBottomStyle的例子吗?

    <picker-view mask-top-style="pickermasktop" mask-bottom-style="pickermaskbottom"

    value="pickerValue" indicator-class="indicator" @change="handleChange"
    @pickstart="pickstart" @pickend="pickend" :immediate-change="true">

    <!-- <picker-view-column class="picker-content"> -->

    <picker-view-column >

    <view class="picker-item" v-for="(item, index) in hourList" :key="index">{{ item }}时</view>

    </picker-view-column>

    <!-- <picker-view-column class="picker-content"> -->

    <picker-view-column >

    <view class="picker-item" v-for="(item, index) in minsList" :key="index">{{ item }}分</view>

    </picker-view-column>

    </picker-view>

    .pickermasktop{

    background-image: linear-gradient(rgba(100,100,100,1),rgba(100,100,100,0),);

    }

    我这样写,页面没有什么变化。

    2024-02-23 00:00

  • DCloud_UNI_LXH

    回复 4***@qq.com: 这两个 style 的书写格式就是 web 的 style 标签的格式。不是填写类名

    2024-02-29 10:59

  • 大良造

    好像还是不支持background-image,并没有修复...

    2024-04-10 19:09

  • DCloud_UNI_LXH

    回复 大良造: 支持啊,你碰到什么问题了?

    2024-04-11 17:35

  • 大良造

    回复 DCloud_UNI_LXH: 回复到下面了,我现在怀疑是mask-style在nvue下都没有生效,因为不止设置background 其它属性 opacity width都不会生效

    2024-04-11 18:21

大良造

大良造 - 大良造

就写一个最基本的picker-view

nvue页面

<picker-view class="popupCon" :indicator-style="indicatorStyle" :value="[3]" mask-style="background:red;opacity:0.1">  
                            <picker-view-column class="popupConColumn">  
                                <view class="popupItem" v-for="(item,index) in 10" :key="index">  
                                    {{item}}  
                                </view>  
                            </picker-view-column>  
                        </picker-view>

.popupCon{
width: 750rpx;
height: 440rpx;
.popupConColumn{
width: 750rpx;
height: 440rpx;}

}
indicatorStyle: height: 88rpx,

在模拟器上和真机上不一致,模拟器不支持nvue,所以表现正常,真机感觉mask-style就完全没有生效,还是默认的渐变色背景,给mask-style 设置 background 没有生效

  • DCloud_UNI_LXH

    使用 mask-top-style、mask-bottom-style 这两个属性

    2024-04-12 11:20

要回复问题请先登录注册