微信小程序(四)视图组件

小程序组件

• 视图容器

(一) 视图容器

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

(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中只可以放置<swiper-item>组件，否则会导致未定义行为
如果在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