小程序组件-button&image

button组件

<!--button组件内容-->
<!--type指定按钮颜色类型-->
<button type="primary">点击</button>
<button type="warn">警告</button>
<button>普通按钮</button>


<!--size指定按钮的大小-->
<button type="primary" size="mini">点击</button>
<button type="warn" size="mini">警告</button>

<!--plain镂空按钮-->
<button type="primary" plain>点击</button>
<button type="warn" plain>警告</button>
<button plain>普通按钮</button>

运行结果图

image组件

<!--图片组件 wxml-->
<image class="container"></image>
<image src="/images/小黄人.jpg" mode="aspectFit"></image>

/*wxss样式*/
.container{
    background-color: rgb(107, 224, 224);
}

image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下：

mode值	说明
ScaleToFill	（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变