小程序组件

• 视图容器

(一) 视图容器

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

(1) view 视图容器

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

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

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

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

(3)swiper容器

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

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

• 指示点控制

• 播放控制

• 滑块控制

• 事件属性

• 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>

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