cover-view

Start from base library version 1.4.0. Please remaining backward compatible.

A text view that is laid over the native component. Native components that can be laid over include map, video, canvas, camera, live-player, live-pusher. Only cover-view and cover-image can be nested.

Attribute Name Category Default Value Description Minimum Version
scroll-top Number Set the offset value of the top scrolling. This only takes effect after overflow-y: scroll is set as the scroll element 2.1.0

cover-image

Start from base library version 1.4.0. Please remaining backward compatible.

Image view laid over the native component. It can cover the same native components as cover-view, and can be nested in the cover-view.

Attribute Name Category Default Value Description Minimum Version
src String icon path. Supports temporary paths and network addresses (supported for 1.6.0 or higher). Base64 format is not currently supported.
bindload EventHandle Triggered when image successfully loads 2.1.0
binderror EventHandle Triggered when image fails to load 2.1.0
Bug & Tips
  1. tip: In Basic Library 2.1.0 or later versions, setting the css style for scale rotate is supported, including transition animation.
  2. tip: In Basic Library 1.9.90 or later versions, cover-view supports overflow: scroll, but does not support dynamic updates for overflow
  3. tip: In Basic Library 1.9.90 or later versions, the outermost layer cover-view supports position: fixed
  4. tip: In Basic Library 1.9.0 or later versions, inserting under view or other labels is supported. Prior to this, it can only be nested in native components map, video, canvas, camera. Avoid nesting within other components.
  5. tip: In Basic Library 1.6.0 or later versions, css transition animation is supported. transition-property supports only transform (translateX, translateY) and opacity.
  6. tip: In Basic Library 1.6.0 or later versions, css opacity is supported.
  7. tip: Event model follows the bubble model, but does not bubble to the native component.
  8. tip: Cover-view label is added to all text suggestions, to avoid alignment errors.
  9. tip: Only supports basic positioning, layout, and text style. Setting single edge border, background-image, shadow, overflow: visible, etc. is not supported.
  10. tip: We recommend that child nodes do not extend beyond parent nodes
  11. tip: Default styles include: white-space: nowrap; line-height: 1.2; display: block;
  12. bug: When the custom component is nested with cover-view, the custom component's slot and its parent node temporarily does not support use of wx:if to control whether something is hidden or displayed, or this might cause cover-view to be invisible.

Sample:

Preview with Developer Tool

<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>
.controls {
  position: relative;
  top: 50%;
  height: 50px;
  margin-top: -25px;
  display: flex;
}
.play,.pause,.time {
  flex: 1;
  height: 100%;
}
.time {
  text-align: center;
  background-color: rgba(0, 0, 0, .5);
  color: white;
  line-height: 50px;
}
.img {
  width: 40px;
  height: 40px;
  margin: 5px auto;
}
Page({
  onReady() {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  play() {
    this.videoCtx.play()
  },
  pause() {
    this.videoCtx.pause()
  }
})

个结果 ""

    没有找到相关内容 ""