小程序(7)之movablearea与coverview

组件之movable-view

• direction 类型string 默认值none 说明movable-view移动的方向，属性值有all.vertical,horizontal,none
• inertia 类型Boolean 默认值false 说明movable-view是否带有惯性
• out0of-bounds 类型boolean 默认值false 超过可移动区域后，movable-view是否可以移动
• x 类型Number 定义X轴向的偏移。如果X的值不在可移动范围内，会自动移动到可移动范围。改变X的值会触发动画。
• y 类型Number 定义y轴的偏移。如果y的值不在可移动范围内，会自动移动到可移动范围。改变X的值会触发动画。
• damping 类型Number 阻尼系数用于控制X或Y改变时候的动画和过界回弹的动画，值越大移动越快
• friction 类型Number 摩擦系数。用于控制惯性滑动的动画。值越大。摩擦力越大。滑动越快停止。必须大于0否则会被设置为默认值

movable-view 必须设置width和height属性，不设置默认为10PX
moable-view默认为绝对定位，top和left属性为0px
当moable-view小于moanle-area时候，moable-view的移动范围在movable-area内，当movable-view大于moable-area时候
movable-view的移动范围必须包含movable-area(X轴和Y轴方向分开考虑)

注意movable-view必须在组件中，必须是直接子节点否则不能移动

<view >
  <view>movable-view区域小于movable-area</view>
  <movable-area style="height: 200px;width: 200px;background: red;">
    <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
    </movable-view>
  </movable-area>
  <view>
    <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
  </view>
  <view>movable-view区域大于movable-area</view>
  <movable-area style="height: 100px;width: 100px;background: red;" direction="all">
    <movable-view style="height: 200px; width: 200px; background: blue;">
    </movable-view>
  </movable-area>
</view>

cover-view

覆盖在原生组件上的文本视图，可覆盖的原生组件包括map,video,canvas，支持嵌套类似绝对定位之类的的。（用处不大）

cover-image

覆盖在源生组件上的图片视图，可覆盖源生组件，同cover-view，支持嵌套

属性名:src 类型String 说明图标路径，支持临时路径，暂时不支持网络地址

备注

• 只可以嵌套在源生组件map.video,canvas内，避免嵌套在其他组件内
• 事件模型遵循冒泡模型，但不会冒泡到源生组件
• 文本建议都套上cover-view标签。避免排版错误
• 只支持基本的定位，布局，文本样式。不支持设置单边的border,opacity,background-image等.
• 建议子节点不要溢出父节点
• 暂时不支持css动画

<!--inde.html-->
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls="{{false}}" event-model="bubble">
  <cover-view class="controls">
    <cover-view class="play" bindtap="play">
      <cover-image class="img" src="/path/to/icon_play" />
    </cover-view>
    <cover-view class="pause" bindtap="pause">
      <cover-image class="img" src="/path/to/icon_pause" />
    </cover-view>
    <cover-view class="time">00:00</cover-view>
  </cover-view>
</video>

index.css

.container{
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-content: space-around;
}
.part1{
  flex: 1 1 100rpx;
  width:100%;
  border-bottom:1px solid #ffffff;
  background:green;
  line-height:100rpx;
  text-align:center;
  color:white;
}

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
  },
  onReady() {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  play() {
    this.videoCtx.play()
  },
  pause() {
    this.videoCtx.pause()
  }
})