uni-app button组件为圆形时且loading为true时，有一圈灰边

uni-app button组件为圆形时且loading为true时，有一圈灰边

开发环境 版本号 项目创建方式
Windows WIN7 64 HBuilderX

示例代码：

<template>    
    <view>    
        <button class="button" :loading="loading"  
        @click="click()"  
        >按钮</button>  
    </view>    
</template>    

<script>    
    export default {    
        data() {    
            return {    
                loading:false  
            }    
        },    
        onLoad() {   

        },    
        methods: {    
            click(){    
                this.loading = true;  
                setTimeout(() => {  
                    this.loading = false  
                },5000)  
            }    
        }    
    }    
</script>    

<style>    
    .button{  
        border-radius: 50rpx;  
        background-image: linear-gradient(#EFCF9E, #E4BF85);  
        width: 80%;  
    }  
</style>

操作步骤：

运行到手机或模拟器后，按下按钮，组件loading状态出现黑边

预期结果：

按下按钮，组件loading状态跟随样式

实际结果：

按下按钮，组件loading状态出现黑边

bug描述：

button组件设置样式为圆形时，loading为true时，有一圈灰边
运行到浏览器不会出现上述问题，运行到手机或模拟器会出现上述问题。


更多关于uni-app button组件为圆形时且loading为true时，有一圈灰边的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我这边也遇到了同样的问题，现在已经解决。 在 button类中，给定 .button::after{ border: none !important; } 将边框隐藏

更多关于uni-app button组件为圆形时且loading为true时，有一圈灰边的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app样式兼容性问题，主要出现在移动端平台。当button组件同时设置border-radius为圆形且启用loading状态时，原生渲染层会显示默认的灰色边框。

解决方案：

  1. 覆盖loading样式：通过CSS覆盖loading状态下的边框样式
.button{
    border-radius: 50rpx;
    background-image: linear-gradient(#EFCF9E, #E4BF85);
    width: 80%;
    border: none;
}
.button[loading]{
    border: none;
    outline: none;
}
  1. 添加平台特定样式：针对移动端单独处理
/* #ifdef APP-NVUE || APP-PLUS */
.button{
    border-width: 0;
}
/* #endif */
  1. 使用伪元素重置：清除可能的默认边框
.button::after{
    border: none;
}
回到顶部