导读:uniapp的button组件type="primary"各平台默认颜色不同。若想统一为自定义主题色,官方建议改用type="default"并自行写样式。代码如下:1.设置按钮背景色为$uni-primary(或十六进制颜色),文字白色;2.设置悬停状态的颜色;3.在button标签添加hover-class="is-hover"属性实现点击效果。通过此方法可让按钮在不同端显示相同的主题色。
                
                
uniapp的button组件type=“primary” 默认颜色如下:
微信小程序、360小程序为绿色,App、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色,抖音小程序为红色,QQ小程序为浅蓝色。
那么如何修改成和自己的主题色相搭配的颜色呢?官方的建议是:”如想在多端统一颜色,请将type改用default,然后自行写样式“。
直接上代码:
1.修改按钮颜色
button[type=default]{
	background-color:$uni-primary;  // 这里我使用的是自定义的主题色,也可以直接换成十六进制的颜色,如:#000000
	color: #fff;
}2.修改按钮点击(按下去)的颜色
button.is-hover {
	color: rgba(255, 255, 255, 0.6);
	background-color: $uni-primary;;
	border-color: $uni-primary;;
  }3.在button组件上加上hover-class属性:
<button type="default" hover-class="is-hover"> 充值 </button> 
         
  
  
  
  
  
  
                 
                 
                 
         苏公网安备 32111202000338号
                苏公网安备 32111202000338号