小程序之基础组件

1. 基本组件

小程序提供了常用的标签组件用于构建页面

官网组件链接

1.1. view

类似 div

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果

1.1.1. 代码

  <view hover-class="h-class">
  点击我试试
  </view>
  <!-- wxss -->
  .h-class{
    background-color: yellow;
  }

1.2. text

显示普通的文本 text只能嵌套text

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

1.2.1. 代码

  <text selectable="{{false}}" decode="{{false}}">
    普&nbsp;通
  </text>

1.3. image

图片标签，image组件默认宽度320px、高度240px

注意：该标签 其实是 web中的 图片标签 和 背景图片的结合！！！ 并且不支持以前的web中的背景图片的写法！！！

属性名	类型	默认值	说明
src	String		图片资源地址，支持云文件ID（2.2.3起）
mode	String	'scaleToFill'	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有效

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

1.4. swiper

微信内置有轮播图组件

默认宽度 100% 高度 150px

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
circular	Boolean	false	是否采用衔接滑动

1.4.1. swiper

滑块视图容器。

1.4.2. swiper-item

滑块

默认宽度和高度都是100%

1.5. video

视频。该组件是原生组件，使用时请注意相关限制。

属性名	类型	默认值	说明
src	String		要播放视频的资源地址，支持云文件ID（2.2.3起）
duration	Number		指定视频时长
controls	Boolean	true	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
autoplay	Boolean	false	是否自动播放
loop	Boolean	false	是否循环播放
muted	Boolean	false	是否静音播放

<video src="{{src}}" controls></video>