鸿蒙ASCF中view与cover-view的实战与避坑指南

鸿蒙专家

在鸿蒙ASCF开发中，view是最基础的容器，cover-view则专门用于在map、video、canvas、camera这些原生组件上覆盖内容。聊天列表的点击反馈、地图上的覆盖标签、视频上的弹幕，都离不开这两个组件。单独讲view只有几个hover属性，但结合cover-view覆盖原生组件的场景，实用度就高了。

view的hover交互

view相比普通div，多了一套点击态控制。最常用的是hover-class，给列表项加点击反馈：

2. <view class='list-item' hover-class='item-hover'
3.   hover-start-time='30' hover-stay-time='200'
4.   bindtap='onItemTap'>
5.   <text class='item-title'>列表标题</text>
6.   <text class='item-desc'>点我有反馈</text>
7. </view>
9. .list-item {
10.   padding: 16px;
11.   border-bottom: 1px solid #f0f0f0;
12.   transition: background 0.1s;
13. }
14. .item-hover {
15.   background: #f5f5f5;
16. }

复制代码

hover-start-time和hover-stay-time配合可以调出不同手感。习惯设为30ms开始、200ms停留，按下去立刻有反馈，松手后快速消失，很跟手。

当有嵌套view时，默认会从子向父冒泡触发hover。用hover-stop-propagation可以阻断：

2. <view class='parent-view' hover-class='parent-hover'>
3.   <text>父容器</text>
4.   <view class='child-view' hover-class='child-hover'
5.     hover-stop-propagation='{{false}}'>
6.     子元素（冒泡）
7.   </view>
8.   <view class='child-view' hover-class='child-hover'
9.     hover-stop-propagation='{{true}}'>
10.     子元素（阻断）
11.   </view>
12. </view>

复制代码

左边那行按住时父容器也会高亮，右边那行设置了hover-stop-propagation，按住时只有子元素变化。

view布局技巧

view本质就是div，布局靠flex和css。等分栏卡片布局可以用flex-wrap加gap实现，卡片设flex:1和min-width控制每行数量，配合hover-class做缩放反馈。吸底操作栏则用position:fixed固定在底部，左右各放一个操作按钮即可。

cover-view：覆盖原生组件

cover-view和cover-image专门用于在map、video、canvas、camera上叠内容。比如在地图上显示当前位置标签和导航按钮：

2. <map id='myMap' latitude='{{latitude}}' longitude='{{longitude}}'
3.   scale='16' show-location class='map-container'>
4.   <cover-view class='map-marker'>
5.     <cover-view class='marker-title'>当前位置</cover-view>
6.     <cover-view class='marker-desc'>{{address}}</cover-view>
7.     <cover-image class='marker-icon' src='/image/location.png'></cover-image>
8.   </cover-view>
9.   <cover-view class='map-actions'>
10.     <cover-view class='action-btn' hover-class='action-hover'
11.       bindtap='onNavigate'>
12.       导航到这里
13.     </cover-view>
14.   </cover-view>
15. </map>

复制代码

但注意官方文档的明确说明：cover-view是为兼容旧版小程序设计的，新开发项目请直接使用view组件。从ASCF 1.0.22开始，map、video、canvas、camera内部直接嵌套view就能正常显示。cover-view更像历史遗留方案，只有维护从微信小程序迁移过来的老代码时，才需要考虑兼容。

cover-view的已知限制包括：子节点只能是cover-view、cover-image或button，不能放普通view；CSS支持有限，部分flex布局可能不生效；cover-image默认宽高是320x240px，不设置会偏大；部分系统版本上，cover-view层级可能高于预期，遮挡其他元素。

cover-image与image组件类似，但限制更多，mode属性控制图片展示方式，同样要注意默认320x240px的问题。

踩过的坑

第一，hover-class路径。view的hover-class指定的类名与普通css选择器一样，写在对应页面级css文件里就能生效，不需要放到全局app.css。

第二，hover-stop-propagation默认false。嵌套多层view时，点击列表项会冒泡到外层容器，可能触发外层背景动画导致卡顿，给每个子view加上hover-stop-propagation='{{true}}'即可解决。

第三，cover-view真机不显示。开发工具里预览正常，真机上一片空白。排查发现是cover-view的css用了position:relative，部分系统版本对定位支持不完整，改成position:absolute就好了。

第四，cover-image尺寸默认太大。不显式设置宽高时，默认320x240px，地图上叠加一个图标会挡住小半个屏幕，务必显式设置宽高。

第五，把cover-view嵌套在其他组件里。有次在scroll-view里放cover-view，怎么都不显示。查文档才发现cover-view只能放在原生组件内部，其他容器里用普通view。

写在最后

view虽然基础，但hover交互的几个参数组合起来能调出不错的手感。cover-view和cover-image主要服务于地图、视频上的覆盖需求，新项目直接用view就行。如果是从微信小程序迁移过来的代码，检查下有没有使用cover-view和cover-image——ASCF 1.0.22+已经支持view直接嵌套，迁移时可以一并替换掉，少维护一套组件。

热心网友4

楼主这篇很实用，特别是hover-start-time和hover-stay-time的参数手感那段，我自己调的时候总是凭感觉，回头按这个数值试试。cover-view的坑也真实，之前真机上地图标签死活不显示，后来也是改成absolute才好，原来还有默认320x240这个说法，当时只以为是图片资源问题。 想请教一下，楼主说新项目直接嵌套view就行，那如果还保留cover-view，主要是不是只为了兼容老代码？还有在video上做弹幕这种场景，直接用view会不会比cover-view更稳？

热心网友4

楼主的分享很实用，尤其是hover-start-time和hover-stay-time的调参建议，30ms开始200ms停留确实手感舒服。我补充一个点：cover-view在真机上如果遇到层级问题，除了改position，有时候还要检查一下父级map有没有设置z-index，之前遇到过类似遮挡，调一下层级就正常了。另外，cover-image默认320x240这个坑太真实了，当时调试时也懵了一下。感谢楼主总结得这么细致。

热心网友4

感谢楼主的实战总结，太实用了！特别是hover-stop-propagation那个坑，之前没注意默认值，列表点击确实会卡顿，加了之后好多了。cover-view那几个限制也很有帮助，真机空白那次排查半天，原来就是position的锅，改成absolute就正常了。期待楼主继续分享更多ASCF开发经验！