uniapp打包微信小程序、抖音小程序中button的区别

发表于 更新于 阅读次数： Changyan： 本文字数： 363 阅读时长 ≈ 1 分钟
微信小程序中的button组件有特定的css，背景可以用“`background：none`”或者`background-color: transparent;`去掉，但是边框再用“`border : none`”去掉就不可以了，还是会有一个细细的边框，原因是微信小程序button的默认样式就是在渲染button之后，用::after再加一个边框。这也是微信小程序与h5的不同之处。所以我们使用:after选择器就可以实现去除边框。

uniapp打包微信小程序、抖音小程序中button的区别

源代码分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button 
    open-type="contact" 
    plain="true" 
    :send-message-title="goods.name" 
    :send-message-img="goods.cover_pic" 
    :send-message-path="`/pages/product/product?id=${goods.id}`" 
    class="kefu"
>
    <view class="kefu_button">
        <view class="icon">
        	<image :src="imgBaseURL + 'icon_kefu@2x.png'"></image>
        </view>
        <text>客服</text>
    </view>
</button>

微信小程序效果图：

image-20231102152303295

移植到抖音小程序后：

image-20231102152401777

解决方法

1
2
3
4
5
6
7
button::after {
  border: none;
}
.kefu{
    background-color: transparent;
    // background:none;
}

原因分析

微信小程序中的button组件有特定的css，背景可以用“background：none”或者background-color: transparent;去掉，但是边框再用“border : none”去掉就不可以了，还是会有一个细细的边框，原因是微信小程序button的默认样式就是在渲染button之后，用::after再加一个边框。这也是微信小程序与h5的不同之处。所以我们使用:after选择器就可以实现去除边框。

background-color: transparent; 和 background: none; 之间的区别

  1. background-color: transparent; 是用于将元素的背景颜色设置为透明。这意味着元素的背景会显示为其所在元素的背景或内容的背景。

  2. background: none; 是用于移除元素的背景，包括背景颜色、背景图像和背景属性的设置。这将使元素没有任何背景。

总的来说，background-color: transparent; 设置元素的背景颜色为透明，而 background: none; 移除元素的背景，使其没有任何背景。