组件记录

view:

hover-class:指定按下去的样式类

hover-start-time: 按住后多久出现点击态，单位毫秒

hover-stay-time:手指松开后点击态保留时间，单位毫秒

.green_hover{
  border: 5px solid black;
}

<view class='comContent' hover-class='green_hover' hover-start-time='100' hover-stay-time='10000'>
 <view class='subCom'>
</view> 
</view>

scroll-view:可滚动视图区域

content必须大于view本身的高度或宽度,滚动条才显示

upper-threshold:距顶部/左边多远时（单位px），触发 scrolltoupper 事件(这个设置不错)

lower-threshold:距底部/右边多远时（单位px），触发 scrolltolower 事件

<scroll-view scroll-y class='scrollContent' bindscrolltoupper='upper' upper-threshold='30' >
 <view id="green" ></view>
     <view id="red" ></view>
    <view id="yellow"></view> 
</scroll-view>

swiper:滑块视图容器

这个类似iOS中的轮播器,可修改是否显示指示器,颜色等,但貌似没有设置指示器大小的属性

  <swiper indicator-dots="true"
  autoplay="true" interval="5000" duration="500" circular='true'>
  <block wx:for= "{{[ '../images/bg.png', '../images/hu.png','../images/huSelect.png','../images/me.png']}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper> 

注意：其中只可放置<swiper-item/>组件，否则会导致未定义的行为

movable-view:可移动的视图容器，在页面中可以拖拽滑动.其考虑到了很多物理特性

movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动

而movable-area 必须设置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轴方向分开考虑

inertia:movable-view是否带有惯性

damping:阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快

friction:摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值

<movable-area style="margin-top:10; height: 200px; width: 200px; background: black;">
    <movable-view style="height: 50px; width: 50px; background: blue;" direction="all">
    </movable-view>
  </movable-area>

cover-view:覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image。

注意的是文档给出的例子,当vedio未播放的时候(第一次),放在vedio上面控件时间不响应,应该是vedio这个标签的一个梗

<video id='myVideo' src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400' controls='true' enable-danmu='true' >
<cover-view class='controls'>
<cover-view class='play'  bindtap='play'>
<cover-image src='../images/play.png' class='img'></cover-image>
</cover-view>
<cover-view class='play' bindtap='pause'>
<cover-image src='../images/pause.png' class='pauseImg'></cover-image>

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

rich-text:富文本

nodes

现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点

• 全局支持class和style属性，不支持id属性。
• nodes 不推荐使用 String 类型，性能会有所下降
• rich-text 组件内屏蔽所有节点的事件。
• name 属性大小写不敏感
• 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除,受信任的html节点请看官方文档
• img 标签仅支持网络图片

nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'width : 100px; height : 100px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello World!'
      }]
    }],

<rich-text nodes='{{nodes}}' ></rich-text>

progress:进度条

show-info:在进度条右侧显示百分比

active-mode:动画从头播,设置这个属性,必须设置active为true,否则不起作用

<progress percent='40' stroke-width='6' color='pink' active-mode='backwards' active show-info></progress>