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 | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 |