《十三》微信小程序中常用的内置组件

视图容器组件：

scroll-view 组件：

可滚动视图区域，在 scroll-view 组件的内部滚动。

使用竖向滚动时，必须要给 scroll-view 一个固定高度，而不能是由其子元素自动撑开，否则的话 scroll-view 的高度等于其子元素的高度，就不会滚动了。

如果 scroll-view 组件要开启 flex 布局，需要设置 enable-flex 属性为 true。

可以通过设置 scroll-top、scroll-left、scroll-into-view 属性来控制 scroll-view 组件的滚动位置。

可以通过设置 paging-enabled 和 enhanced 属性来产生分页效果，每次滑动将会只会滑动到下一个 item。

swiper 和 swiper-item 组件：

滑块视图容器。默认高度是 150px。

一般情况下， swiper-item 组件中会放置图片来实现轮播图效果。

表单组件：

form 表单组件：

当点击 form 表单中 form-type 为 submit 的 button 组件时，会触发表单的 submit 事件。当点击 form 表单中 form-type 为 reset 的 button 组件时，会触发表单的 reset 事件。
在表单中的组件上加上 name 来作为它的 key，在 submit 或 reset 绑定的事件处理函数中就可以获取到表单中的组件的 value 值。

<form bindsubmit="handleSubmit">
  <view>
    标题
    <!-- 使用 value 设置输入框的内容 -->
    <!-- 使用 name 作为表单组件的 key，提交时可以获取到对应 key 的 value 值 -->
    <input name="title" value="{{formData.title}}" />
  </view>
  <view>
  	内容
    <input name="content" value="{{formData.content}}" />
  </view>
  <!-- 点击表单中 form-type 为 submit 的 button 组件，会触发表单的 submit 事件 -->
  <button form-type="submit">保存</button>
</form>

Page({
  data  : {
  	// 回填表单数据
    formData: {
      title: '我是标题',
      content: '我是内容',
    },
  },
  handleSubmit: function(e) {
  	// 点击保存按钮可获取到表单数据
  	const {value} = e.detail
  	console.log(value)
  }
})

button 按钮组件：

button 按钮组件的 open-type 属性有很多微信开放能力。

媒体组件：

image 图片组件：

image 组件默认宽度 320px、高度 240px，因此需要结合 mode 模式来对图片进行缩放和裁剪。

mode 属性值中最常用的是 widthFix，保持原图宽高比不变，宽度不变，高度自动计算。

原生组件和非原生组件：

微信小程序中的组件分为原生组件和非原生组件。大部分都是非原生组件，少部分是由微信客户端创建的原生组件。

原生组件有：input（仅在 focus 时表现为原生组件）、textarea、video、map、camera、canvas、live-player、live-pusher。

在工具上，原生组件是用 web 组件模拟的，因此很多情况并不能很好的还原真机的表现，建议在使用到原生组件时尽量在真机上进行调试。

原生组件的使用限制：

由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制：

1. 【同层渲染下已无该限制】原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法覆盖在原生组件上。
2. 【同层渲染下已无该限制】原生组件目前还无法在 picker-view 中使用。
3. 【同层渲染下已无该限制】部分 CSS 样式无法应用于原生组件。

   无法对原生组件设置 CSS 动画。
   无法定义原生组件为 position:fixed。
   不能在父级节点使用 overflow:hidden 来裁剪原生组件的显示区域。

4. 原生组件的事件监听不能使用 bind:eventname 的写法，只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。
5. 【同层渲染下已无该限制】原生组件会遮挡 vConsole 弹出的调试面板。

原生组件同层渲染：

同层渲染是为了解决原生组件的层级问题，在支持同层渲染后，原生组件与其它组件可以随意叠加，有关层级的限制将不再存在。但是组件内部仍由原生渲染，样式一般还是对原生组件内部无效。

当前所有原生组件（除 input 组件 focus 状态）均已支持同层渲染。