小程序学习之小程序组件(一)视图容器组件
前言 组件的介绍和分类
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:可应用在地图上查看某一地点