小程序 cover-view

文章目录

小程序 cover-view

众所周知,小程序中有些原生组件,默认层级最高,普通的 view 无法在上面覆盖,此时需要使用 cover-view 标签。而这个标签相比于 view,缺少很多属性,使用的时候发现这里没有那里也没有。

覆盖原生组件时,只可以使用 cover-view 和 cover-image,其中 cover-view 不允许设置 background-image (因此 linear 这些渐变色背景也无法使用),可以使用 cover-image ,把内容绝对定位来替代,cover-image 不允许使用 base64,支持网络路径。

cover-view 已经支持 overflow-y: scroll 了,我在实现 map 组件上的覆盖物滚动时,使用了 touchstart, touchmove, touchend 三个事件修改 top 值来拟造滑动效果,虽然可以实现,但滑动效果非常卡,并且一旦滑动过快,会出现闪烁,touchmove 并不能完全监听到我所有的滑动,而是隔一段时间才监听到一次,看起来是内部已经做了节流处理,因此我改用了 overflow 属性带来的原生滚动,舒服多了。但从地图底部拖动到顶部时的拖动边界,仍然监听不灵敏,目前考虑将其置为按钮,不允许自定义滚动位置,仅允许滚动到两个固定位置,否则回退。

1
2
3
4
5
6
<!-- 示例代码, cover-view 是写在原生组件内部的。而不是外部 -->
<map>
<cover-view>
<cover-image />
</cover-view>
</map>
分享到:

评论完整模式加载中...如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理