小程序常用组件－视图容器

本系列主要对小程序常用的组件做一个总结，方便自己及其它小程序开发者作为字典查阅和检索。

共同属性

小程序组件有一些公共属性，在每个组件中代表的意义和数据类型都是一样的。

• id: 标识组件的唯一性。
• class: 组件的样式类，在*.wxss中定义该样式
• style: 组件的内联样式，动态设置的内联样式
• hidden: 组件是否显示，默认为 false, 即默认显示
• data-*: 自定义属性，组件上触发事件时，会发送给事件处理函数,可以通过dataset获取
• bind*/catch*:将组件的事件和逻辑层的处理函数进行绑定，其中bind：冒泡事件(继续向上层分发)，catch:非冒泡事件(停止向上分发事件）

容器组件

容器组件：内部能嵌套任何标签。常用的视图容器有：view, scroll-view, swiper

1. view组件

<view/> 是一个块级容器组件，任何一种复杂的布局都可以嵌套在<view/> 组件内，并在*.wxss中设置相关样式。

<view/> 除了上述组件共有的属性外，还包含一组关于点击行为的属性。

• hover: 是否启动点击态，默认为false
• hover-class: 指定按下去的样式，默认为none，即hover-class = "none",没有点击态效果
• hover-start-time: 按住后延迟多少毫秒出现点击态，单位：ms, 默认为50ms
• hover-stay-time: 手指松开后，点击态保持事件，单位：ms, 默认为400ms

2. scroll-view 组件

在布局中，需要容器具有可滑动的功能，且能监听滚动、触顶、触底等事件，就需要<scroll-view/> 组件，<scroll-view/> 在<view/> 组件上添加滚动相关的属性，通过这些属性，可以响应滚动相关事件。

• scroll-x : 允许横向滚动，默认为false
• scroll-y : 允许纵向滚动，默认为false
• upper-threshold: 触发scrolltoupper 事件时， 距顶部／左边多少距离（单位为:px)
• lower-threshold: 触发scrolltolower事件时，距底部／右边多少距离（单位为:px)
  -scroll-top: 设置竖向滚动条位置
  -scroll-left: 设置横向滚动条位置
  -scroll-into-view: 值为某子元素的id, 该子元素滚动到顶部对齐滚动区域顶部
  -bindscrolltoupper: 滚动到顶部／左边，会触发scrolltoupper 事件
  -bindscrolltolower:滚动到底部／右边，会触发scrolltolower 事件
  -bindscroll: 滚动时触发，其中函数参数 event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

注意:
<textarea/>,<video/>,<map/>,<canvas/> 不能嵌套在<scroll-view/>中使用

3. swiper组件－滑块视图组件

利用swiper 组件，可以实现轮播图，滑动页面，预览图片等，一个完整的滑块视图软件由<swiper/> 和 <swiper-item/> 两个标签组成，不能单独使用。一个<swiper/> 只能嵌套一个或多个<swiper-item/>标签，放置其它的标签会被删除，其中，<swiper-item/> 中能放置任何标签，高度默认为100%,另外没有任何其它特殊属性。

<swiper/> 的属性如下：

• indicator-dots: 是否显示面板指示点，默认：false
• autoplay: 是否自动播放，默认: false
• current: 当前所在页面的index, 默认：0
• interval: 自动切换时间间隔，默认：5000ms
• duration: 滑动动画时间间隔，默认：1000ms
• circular: 是否采用衔接动画播放，默认：false
• bindchange: current 改变时触发change事件，回调函数参数event.detail = {current}