当前位置: 首页 > article >正文

[uniapp/wx小程序] 关于cover-view滚动/点击穿透问题的解决方案/cover-view 的坑

情况:如果在原生组件上,搞了一些弹窗、覆盖层、操作栏等等的东西,有层级的情况,就会出现事件穿透的问题

问题:自然会想到官方给出的解决方案:使用cover-view。但有时穿透问题虽然解决了,但会出现各种新的问题,icon失效、text消失、层级过高、超出范围的元素会被隐藏,border异常...等等


经过一系列研究,总结出几个有效的方法,记录一下:

一、使用cover-view和cover-image (建议最后再考虑这个方法)

首先,如果是用view等标签写好的组件,发现了问题,那么建议最后再考虑使用cover-view和cover-image,为什么?因为此项改造成本巨大:

  1. 需要将所有的view转换成cover-view,
  2. 所有的text都要包裹上cover-view,
  3. 所有的icon图标都得废弃并改造成cover-image使用图片代替,
  4. 单边的border-radius也会失效,这个改起来更麻烦
  5. cover-view在应用中的层级最高,并且无法调整
  6. 以上5点的改造,通常要伴随着css代码改动,js逻辑改动

如果是一个复杂的组件,以上这几点的改造成本,测试成本,相当高。

二、使用uni-popup 弹出层

推荐,这个很灵活,虽然大多用来做弹窗,但是可以关闭遮罩层,取消点击遮罩层事件。用来代替cover-view,并且这东西没有太多的限制和坑,里面照样用view,用image,用icon等等,如果是已经开发好的组件修改,代码都不需要太多改动。

唯一的问题就是,要解决滚动穿透/点击穿透,一行代码就能搞定

这个官方文档中也有说到,亲测好用,这个会把滚动穿透、点击穿透,同时解决。


http://www.kler.cn/a/296934.html

相关文章:

  • FreeRTOS学习笔记(四)Freertos的中断管理及临界保护
  • 浙大数据结构:04-树7 二叉搜索树的操作集
  • 【每日刷题】Day114
  • Git-如何将本地项目推到GitHub
  • 盘点10款顶级加密软件,让企业数据安全得到保障!
  • 20240905软考架构-------软考121-125答案解析
  • 深入理解RxJava:响应式编程的现代方式
  • 路灯集中控制器与智慧照明:塑造未来城市的智能光影
  • 物联网之ESP32控制GPIO输出点亮LED、闪烁LED灯
  • 开放系统,面向各类业务需求可提供定制化服务的智慧物流开源了
  • 大模型一体机——“开箱即用”的最强大脑
  • 24年9月通信基础知识补充1
  • MATLAB实现PID参数自动整定
  • Python 调用手机摄像头
  • 关于go-shp创建shp文件问题
  • PDF到CAD转换:四大实用工具指南!
  • HCIA--实验十三:VLAN间通信子接口实验/双单臂路由实验
  • EUDR迫在眉睫,FSC和PEFC给出应对方案
  • YOLOv8 只检测人 只画框不要标签
  • 跟李沐学AI:语言模型