微信小程序常用组件

官方组件文档：https://developers.weixin.qq.com/miniprogram/dev/component/
微信小程序内置了很多组件，开发中可以直接使用他们来展示响应的内容

1.视图容器 view

类似于web中的div，不过他有一些内置的属性

• hover-class：指定按下去的样式类。当 hover-class="none" 时，没有点击态效果

<view hover-class="box">
    {{msg}}
</view>

当手指按下去时，这个容器会有box这个样式类的效果

• 其他属性

2.text

类似于web中的span，他是个行内标签。拥有一些内置的属性

• selectable：能否被选中。默认false

<view >
    <text selectable>{{msg}}</text>
</view>
<view >
    <text>{{title}}</text>
</view>

space：设置空格的大小，他有3个值：
ensp：空格大小=中文字符大小的一半
emsp：空格大小=中文字符的大小
nbsp：正常显示，就相当于<pre>标签，不会将多个空格当一个空格显示

<view >
    <text decode>空&nbsp;&nbsp;&nbsp;白</text>
</view>
<view >
    <text>空三个格白</text>
</view>
<view >
    <text space="ensp">空      白(中间6个空格)</text>
</view>
<view >
    <text space="emsp">空   白(中间3个空格)</text>
</view>
<view >
    <text space="nbsp">空   白(中间3个空格)</text>
</view>

3.image

图片。支持JPG、PNG、SVG格式
这个标签默认大小是320*240
属性：

• src：图片路径
• lazy-load：是否开启图片懒加载，在即将进入一定范围（上下三屏）时才开始加载，默认false
• binderror：当错误发生时触发
• bindload：当图片载入完毕时触发
• mode：图片裁剪、缩放的模式
  mode的值：
  scaleToFill：默认。即改变图片宽高比来完全适应容器
  aspectFit：缩放模式，保持图片宽高比缩放图片，使长边大小与对应的容器的边相等，此时短边不能完全填充容器
  aspectFill：缩放模式，保持图片宽高比缩放图片，使短边大小与对应的容器的边相等，此时长边会超出容器
  widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
  top：裁剪模式，不缩放图片，如果图片大小超出容器，则只显示图片的顶部区域
  bottom：同上，只显示底部区域
  center：同上，只显示中间区域
  left：同上，只显示图片的左边区域
  right ：同上，只显示图片的右边区域
  top left：同上，只显示图片的左上边区域
  top right：同上，只显示图片的右上边区域
  bottom lef：同上，只显示图片的左下边区域
  bottom right：同上，只显示图片的右下边区域

4、cover-view

覆盖在原生组件之上的文本视图。

可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

5、cover-image

覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。

6、scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。