语法

<!--pages/page/mybutton/btn.wxml-->
<view>---通过type指定按钮类型---</view>
<button>普通按钮</button>
<button type="primary" >主色调按钮</button>
<button type="warn">警告按钮</button>
<view>---小尺寸按钮---</view>
<view>
  <button size="mini">普通按钮</button>
  <button type="primary" size="mini">主色调按钮</button>
  <button type="warn" size="mini" >警告按钮</button>
</view>
<view>---镂空按钮---</view>
<button plain>普通按钮</button>
<button type="primary" plain>主色调按钮</button>
<button type="warn" plain>警告按钮</button>
<view>---状态---</view>
<button loading>普通按钮</button>
<button type="primary" loading>主色调按钮</button>
<button type="warn" loading disabled>被禁用的loding中的警告按钮</button>

常用属性

属性 类型 默认值 说明 size string default 按钮大小(mini:小尺寸 default:默认大小) type string default 按钮样式类型(primary:绿色 default:白色 warn:红色) plain boolean false 按钮是否镂空,背景色透明 disabled boolean false 是否禁用 loading boolean false 文字前是否带有loading图标(一般配合disabled用于等待接口响应)

语法

<image src="/pages/static/images/test.png"></image>

常用属性

属性 类型 默认值 说明 src tring 图片资源地址(支持网络地址) lazy-load boolean false 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载(需要1.5.0版本及以上) binderror eventhandle 当错误发生时触发，event.detail = {errMsg} bindload eventhandle 当图片载入完毕时触发，event.detail = {height, width} mode string scaleToFill 图片裁剪、缩放的模式

mode合法值:

合法值 说明 scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来 aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变(需要2.10.3版本及以上) top 裁剪模式，不缩放图片，只显示图片的顶部区域 bottom 裁剪模式，不缩放图片，只显示图片的底部区域 center 裁剪模式，不缩放图片，只显示图片的中间区域 left 裁剪模式，不缩放图片，只显示图片的左边区域 right 裁剪模式，不缩放图片，只显示图片的右边区域 top left 裁剪模式，不缩放图片，只显示图片的左上边区域 top right 裁剪模式，不缩放图片，只显示图片的右上边区域 bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域 bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域

注意事项

支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID image组件默认宽度320px、高度240px image组件中二维码/小程序码图片不支持长按识别。仅在 wx.previewImage 中支持长按识别