cover-view

优质

小牛编辑

138浏览

2023-12-01

cover-view

覆盖在原生组件之上的文本视图，可覆盖的原生组件包括 map 、video 、canvas 、camera 、live-player 、live-pusher 、textarea ，只支持嵌套 cover-view 、cover-image ，可在 cover-view 中使用 button。 movable-view 的可移动区域

属性名	类型	默认值	说明
scroll-top	Number		设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效

cover-image

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

属性名	类型	说明
src	String	图标路径，支持临时路径、网络地址。暂不支持 base64 格式。
bindload	EventHandle	图片加载成功时触发
binderror	EventHandle	图片加载失败时触发

Bug & Tip

tip: 事件模型遵循冒泡模型，但不会冒泡到原生组件。
tip: 文本建议都套上 cover-view 标签，避免排版错误。
tip: 只支持基本的定位、布局、文本样式。不支持设置 单边的 border、background-image、shadow、overflow: visible等。
tip: 建议子节点不要溢出父节点
tip: 默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block;
tip: 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 jd:if 控制显隐，否则会导致 cover-view 不显示

示例代码

<!--cover-view.jxml-->
<view class="cover-view-section">
      view
    <block >
      <cover-view class="cover-view-text">这是cover-view 
      </cover-view>
    </block>
</view>
<view class="cover-view-section">
      view
    <block >
      <cover-image class="cover-view-image" src='../../../../image/jd_logo.jpg' />
    </block>
</view>