button

组件类型：UniButtonElement

按钮

button 兼容性

Android	iOS	web
3.9	4.11	4.0

属性

名称	类型	默认值	描述
disabled	boolean	false	是否禁用
hover-class	string(string.ClassString)	"button-hover"	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-start-time	number	20	按住后多久出现点击态，单位毫秒
hover-stay-time	number	70	手指松开后点击态保留时间，单位毫秒
size	string	"default"	按钮的大小
值名称 描述 default 默认大小 mini 小尺寸
type	string	"default"	按钮的样式类型
值名称 描述 default 白色 primary 蓝色 warn 红色
plain	boolean	false	按钮是否镂空，背景色透明
loading	boolean	-	名称前是否带 loading 图标
form-type	string	-	用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
值名称 描述 submit 提交表单 reset 重置表单

size 兼容性

	Android	iOS	web
default	3.9	4.11	4.0
mini	3.9	4.11	4.0

type 兼容性

	Android	iOS	web
default	3.9	4.11	4.0
primary	3.9	4.11	4.0
warn	3.9	4.11	4.0

form-type 兼容性

	Android	iOS	web
submit	3.9	4.11	4.0
reset	3.9	4.11	4.0

button 属性兼容性

	Android	iOS	web
disabled	3.9	4.11	4.0
hover-class	3.9	4.11	4.0
hover-start-time	3.9	4.11	4.0
hover-stay-time	3.9	4.11	4.0
size	3.9	4.11	4.0
type	3.9	4.11	4.0
plain	3.9	4.11	4.0
loading	x	x	4.0
form-type	3.9	4.11	4.0

• 在web平台，由于0.5px有兼容性问题，button的边框使用伪类实现。
• 在app平台，HBuilderX4.02及以上版本调整为原生实现button组件，默认边框不占高度，解决button实际渲染宽高与Web端不一致的问题；HBuilderX4.01及以下版本封装text实现button组件，由于不支持伪类，默认边框使用 border 样式实现，会导致button的实际的渲染宽高在app端比web端多1px。
• button的默认边框宽度为0.5px，当type属性为plain时，边框宽度是1px，此时在web平台button实际的渲染宽高会大于其他类型1px，在app平台button实际的渲染高度与其他类型一致。
• button 的text区域文字，app平台HBuilderX4.02及以上版本支持 \n 方式换行，HBuilderX4.01及以下版本不支持 ，会直接显示 \n 字符；Web端 \n 会变成一个空格。
• button按下后触发hover-class效果，在app平台，手指不松开、一直在屏幕上移动、离开button组件范围后，hover-class效果消失，同时也不会触发点击事件；在web平台，手指移动一点后，即便未离开button范围，hover-class效果也会消失，同时也不会触发点击事件。
• 无论在哪个平台，hover-class消失后松开手指，都不会触发点击事件。
• button 设置hover-class属性时需注意，app平台HBuilderX4.04及以下版本与web平台有差异，HBuilderX4.05版本统一为以下规则：
  • 如果hover-class属性值设置为none，在style样式里面设置了同名的none样式，none样式将不起作用，没有点击态效果
    • 如果hover-class属性值设置为button-hover或者不设置hover-class属性值，在style样式里面设置了同名的button-hover样式，点击效果将使用button-hover样式
    • 如果hover-class属性值设置为无效值（或非法值），没有点击态效果

示例

hello uni-app x

Template

Script

<template>
  <view class="main">
    <button id="testButton" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
      :type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
      @touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
      @touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
      :class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
      {{ text }}
    </button>
  </view>
  <scroll-view style="flex: 1">
    <view class="content">
      <boolean-data :defaultValue="false" title="按钮是否镂空，背景色透明" @change="change_plain_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="修改默认样式和点击效果(高优先)" @change="change_default_style"></boolean-data>
      <enum-data :items="size_enum" title="按钮的大小" @change="radio_change_size_enum"></enum-data>
      <enum-data :items="type_enum" title="按钮的类型" @change="radio_change_type_enum"></enum-data>
      <input-data :defaultValue="text" title="按钮的文案" type="text" @confirm="confirm_text_input"></input-data>
      <view style="height: 10px;"></view>
      <button @click="navigateToChild">更多示例</button>
    </view>
  </scroll-view>
</template>

<style>
  .main {
    padding: 5px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-direction: row;
    justify-content: center;
  }

  .main .list-item {
    width: 100%;
    height: 100px;
    border: 1px solid #666;
  }

  .custom-btn {
    color: #ffffff;
    background-color: #1AAD19;
    border-color: #1AAD19;
  }

  .is-hover {
    color: rgba(255, 255, 255, 0.6);
    background-color: #179b16;
    border-color: #179b16;
  }

  .button-hover {
    color: rgba(0, 0, 0, 0.6);
    background-color: #dedede;
  }
</style>

参见

• 参见uni-app相关文档
• 参见uni-app x相关文档
• 相关 Bug

hover-class 属性值

button样式修改

button在元素的text区域直接写文字，和text组件一样。可以这么理解，button是一个特殊的text组件，文字样式可以直接写在button组件的style或class上。

button组件属性中的size和type，属于预置样式，方便开发者使用。开发者也可以通过style和class来自定义样式。

button虽然可以内嵌text组件，但不建议通过text组件来修改button样式，因为会导致hove-class不生效。尤其是uvue中样式不继承。建议button组件text区域直接写文字，然后在button组件的style或class属性编写样式。

style和class的优先级，高于size和type属性。

<template>
	<button size="default" type="default"
	style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19"
	hover-class="is-hover">按钮</button>
</template>
<style>
.is-hover {
	color: rgba(255, 255, 255, 0.6);
	background-color: #179b16;
	border-color: #179b16;
  }
</style>

button点击

button 组件的点击遵循 vue 标准的 @click事件。

button 组件没有 url 属性，如果要跳转页面，可以在@click中编写，也可以在button组件外面套一层 navigator 组件。举例，如需跳转到about页面，可按如下几种代码写法执行：

<template>
	<view>
		<navigator url="/pages/about/about"><button>通过navigator组件跳转到about页面</button></navigator>
		<button @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
	</view>
</template>
<script>
	export default {
		methods: {
			goto(url:string) {
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

tips

• button 的默认文字大小为18px，文字行高为2.5。如果指定了按钮高度，要注意手动调整文字行高