小程序(四) 小程序中的视图组件

小程序组件

• 视图容器

(一) 视图容器

• 了解小程序组件中的视图容器
• 明确小程序组件中的视图容器的用途和方法
• 了解不同视图容器的特点和注意事项

(1) view 视图容器

view 视图容器:是小程序最基础的组件，借助 view 可以实现页面结构的划分，页面布局的调整等.

 <view hover-class="view_hover" hover-start-time=500 hover-stay-time=500  hover-stop-propagation= true > 123</view>

view 除了基础的公共属性外，还有四个属性

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类，当 hover-class=”none”时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

(2) scroll-view 容器

• scroll-view 视图容器: 可以在页面形成一个可以滚动的视图区域，帮助开发者实现页面部分内容的滑动展示

<scroll-view
      scroll-x
      upper-threshold = 50
      lower-threshold = 50
      scroll-top = 50
      scroll-left =50
      scroll-into-view="part1"
      scroll-with-animation = true
      enable-back-to-top = true
></scroll-view>

属性名	类型	默认值	说明
scroll-x	boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距离顶部/左边多远(单位 px)触发 scrolltoupper 事件
bindscrolltoupper	Event		滚动到顶部/左边,会触发 scrolltoupper 事件
lower-threshold	Number	50	距离底部/右边多远(单位 px)触发 scrolltolower 事件
bindscrolltolower	Event		滚动到底部/右边,会触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-with-animation	Boolean	false	在设置滚动条位置时候使用动画过渡
scroll-into-view	String		值为某子元素 ID(id 不能以数字开头)设置哪个方向可滚动则在哪个方向滚动到该元素
enable-back-to-top	Boolean	false	ios 点击顶部状态栏，安卓双击标题栏，滚动条返回顶部，支持竖向
bindscroll	event		滚动时触发,event.detail={scrollLeft,scrollTop,scrollHeight,scrollWidth,deltax,deltay}

请勿在 scroll-view 中使用 textarea ,map,canvas,video 组件
scroll -into-view 的优先级高于 scroll-top;
在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
若要使用下拉刷新，请使用页面的滚动而不是 scroll-view 这样也能通过点击顶部状态栏回到页面顶部

---

(3)swiper 容器

• swiper 滑块容器能够在小程序内实现轮播图的效果

swiper 组件除了公共属性外，还有一些特殊的属性

• 指示点控制

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色

• 播放控制

属性名	类型	默认值	说明
autoplay	Boolean	false	是否显示面板指示点
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动
vertical	Boolean	false	滑动方向是否是纵向

• 滑块控制

属性名	类型	默认值	说明
current	Number	0	当前所在滑块的 index
current-item-id	String		当前滑块的 item-id 不能与 current 被同时指定
previous-margin	String	“0px”	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	String	“0px”	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
display-multiple-items	Number	1	同时显示的滑块数量
skip-hidden-item-layout	Boolean	false	是否跳过来显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但是会丢失隐藏状态滑块的布局信息

• 事件属性

属性名	类型	说明
bindchange	event	current 改变时会触发 change 事件，event.detail={current:current,source:source}
bindanimationfinish	event	动画结束时候会触发 animationfinish 事件 event.detail 同上

• swiper 组件使用注意

swiper 中只可以放置组件，否则会导致未定义行为
如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停的调用,因为通常情况下请在改变 current 值前检测 source 字段判断是否用户触摸引起

---

 <swiper
        indicator-dots="{{indicatorDots}}"
         autoplay="{{autoplay}}"
         circular="{{circular}}"
         vertical="{{vertical}}"
        interval="{{interval}}"
        duration="{{duration}}"
         previous-margin="{{previousMargin}}px"
         next-margin="{{nextMargin}}px">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>

(4)movable-view 可视图容器

• movable-view : 是小程序的可移动视图容器,用于制作一些需要滑动操作的场景

<movable-area>
 <movable-view x="{{x}}" y="{{y}}" direction="all"></movable-view>
</movable-area>

属性名	类型	默认值	说明	版本号
direction	String	none	movable-view 的移动方向，属性值有 all、vertical、horizontal、none
inertia	Boolean	false	movable-view 是否带有惯性
out-of-bounds	Boolean	false	超过可移动区域后，movable-view 是否还可以移动
x	Number / String		定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画
y	Number / String		定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画
damping	Number	20	阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快
friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值
disabled	Boolean	false	是否禁用	1.9.90
scale	Boolean	false	是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内	1.9.90
scale-min	Number	0.5	定义缩放倍数最小值	1.9.90
scale-max	Number	10	定义缩放倍数最大值	1.9.90
scale-value	Number	1	定义缩放倍数，取值范围为 0.5 - 10	1.9.90
bindchange	EventHandle		拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中 source 表示产生移动的原因，值可为 touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）	1.9.90
bindscale	EventHandle		缩放过程中触发的事件，event.detail = {scale: scale}

movable-view 必须设置 width 和 height 属性，不设置默认为 10px
movable-view 默认为绝对定位，top 和 left 属性为 0px
当 movable-view 小于 movable-area 时，movable-view 的移动范围是在 movable-area 内；当 movable-view>大于 movable-area 时，movable-view 的移动范围必须包含 movable-area（x 轴方向和 y 轴方向分开考虑）

---

<movable-area>
      <movable-view x="{{x}}" y="{{y}}" direction="all">text</movable-view>
 </movable-area>

(五)cover-view 覆盖文字组件 cover-image

• cover-view 组件能够覆盖在原生组件上，从而实现原生组件上显示一些文本内容
• cover-view 组件可以覆盖 map,video,canvas,camera 这四种原生组件

<video>
<cover-view>
  <cover-view>
   <cover-image/>
  </cover-view>
</cover-view>
</video>

cover-view 支持设置 overflow:scroll 但不能动态更新
cover-view 支持 position:fixed
cover-view 只支持基本的定位，布局，文本样式。不支持设置的单边的 border,background-image,shadow,overflow:visible