绯炎之殇
绯炎之殇
  • 发布:2020-10-12 18:24
  • 更新:2020-10-12 18:31
  • 阅读:1406

iOS下nvue页面的list、scroll-view等滚动组件里的border-top-left-radius等属性不能正常生效,改为view等组件可正常发生作用

分类:nvue

1.list、scroll-view等滚动组件里的border-top-left-radius实际表现等同于border-radius。
而border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius则无效。
2.在view等组件下以上参数表现一切正常
PS: 安卓可正常发生作用,此问题发生在iOS版本12.2下,其他版本未测试。

对前端还不太熟悉,请问这是bug还是weex固有问题?
iOS:


安卓:

简单代码:

<template>  
    <view headerBG="#FFFFFF" :customHeader="false">  
        <scroll-view class="grace-body">  
            <view class="grace-title">  
                <view class="grace-title-border"></view>  
                <text class="grace-title-text">分享界面</text>  
                <text class="grace-text-small ">grace.hcoder.net</text>  
            </view>  
            <text class="grace-text-small " @tap="openShare">点击这里打开分享界面</text>  
            <!--  利用底部对话框插槽 + 宫格布局实现分享布局 -->  

        </scroll-view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  

            };  
        },  
        methods: {  

        }  
    }  
</script>  
<style>  
    .grace-body {  
        width: 700rpx;  
        background-color: #CCCCCC;  
        left: 0;  
        margin-top: 200rpx;  
        border-top-left-radius: 50rpx;  
    }  

    .grace-title {  
        color: #333333;  
    }  

    .grace-title-border {  
        width: 8rpx;  
        background-color: #3688FF;  
        margin-right: 16rpx;  
        height: 28rpx;  
    }  

    .grace-title-text {  
        font-size: 28rpx;  
        color: #333333;  
        line-height: 50rpx;  
        width: 750rpx;  
        flex: 1;  
    }  

    .grace-text-small {  
        font-size: 22rpx;  
        line-height: 40rpx;  
    }  
</style>  
2020-10-12 18:24 负责人:无 分享
已邀请:
chenli

chenli

改为如下看看

.grace-body {    
        width: 700rpx;    
        background-color: #CCCCCC;    
        left: 0;    
        margin-top: 200rpx;    
        border-top-left-radius: 50rpx;    
        border-top-right-radius: 0;    
        border-bottom-left-radius: 0;    
        border-bottom-right-radius: 0;    
    }  
  • 绯炎之殇 (作者)

    感谢回答,但可惜试了一下还是不行。

    2020-10-12 19:12

该问题目前已经被锁定, 无法添加新回复