小程序学习之小程序组件（一）视图容器组件
前言 组件的介绍和分类
1.组件是视图层的基本组成单元，组件常包括<开始标签><结束标签>。
2.按功能分为七类
正文 视图容器组件
1.view 静态视图容器，本身无大小和颜色。
- hover-class 指定按下去的样式类，默认值none则无单击状态
- hover-stop-propagation 指定是否阻止本容器的祖先节点出现单击状态
- hover-start-time 按住本容器后多久出现单击状态 ms
- hover-stay-time 手指松开后单击状态保留时长 ms
2.scroll-view 可滚动视图区域
- scroll-x 允许横向滚动
- scroll-y 允许竖向滚动
- upper-threshold 距顶部/左边多远时(px)触发scrolltoupper事件
- lower-threshold 距底部/右边多远时(px)触发scrolltolower事件
- scroll-top 设置竖向滚动条位置
- scroll-left 设置横向滚动条位置
- scroll-into-view 值应是某元素id(不能以数字开头)，设置哪个方向可滚动，就在哪个方向滚动到该元素
- scroll-with-animation 设置滚动条位置时使用动画过渡
- enable-back-to-top ios单击顶部状态栏、Android双击标题栏滚动条返回顶部，只支持竖向
- bindscrolltoupper 滚动到顶部/左边触发scrolltoupper事件
- bindscrolltolower 滚动到底部/右边触发scrolltoupper事件
- bindscroll 滚动时触发，event.detail = {scrollLeft ，scrollTop，acrollHeight，scrollWidth，deltaX，deltaY}
ps：在使用竖向滚动时需要给他一个固定高度，且通过wxss设置height
3.swiper 滑块视图容器，常用于制作幻灯片切换播放效果；配合swiper-item组件一起使用
- indicator-dots 是否显示面板指示点
- indicator-color 指示点颜色
- indicator-active-color 当前选中的指示点颜色
- autoplay 是否自动切换
- current 当前所在滑块的index
- current-item-id 当前所在滑块的item-id，不能与current被同时指定
- interval 自动切换时间间隔
- duration 滑动动画时长
- circular 是否采用衔接滑动
- vertical 滑动方向是否为纵向
- previous-margin 前边距，可用于露出前一项的一小部分，接收px/rpx
- next-margin 后边距，可用于露出后一项的一小部分，接收px/rpx
- display-mulitiple-item 同时显示的滑块数量
- skip-hidden-item-layout 是否跳过未显示的滑块布局，设为true可优化复杂情况下滑动性能，但会丢失隐藏状态滑块的布局信息
- bindchange current改变时触发change事件，event.detail = {current:current ,source:source}
- bindanimationfinish 动画结束时触发animationfinish事件，event.detail同上
ps：change事件返回的detail中包含一个source字段，表示导致变更的原因，可能值如下：
4.movable-view 可移动视图容器，该组件可在页面中拖拽滑动。不能独立使用，必须放在<movable-area>组件中且是直接子节点，否则无效。
<movable-area>组件是可移动区域范围，属性有scale-area，可自定义宽高，默认是10px
<movable-view>组件属性如下：
ps：movable-view默认为绝对定位，当movable-view小于movable-area时，movable-view移动范围是在movable-area内；反之，则移动范围必须包含movable-area
5.cover-view 可覆盖在原生组件上的文本视图容器，可覆盖的原生组件包括map、video、canvas、live-player、live-pusher等
cover-image
ps：可应用在地图上查看某一地点