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

uniapp view设置当前view之外的点击事件

  • 推荐学习文档
    • golang应用级os框架,欢迎star
    • golang应用级os框架使用案例,欢迎star
    • 案例:基于golang开发的一款超有个性的旅游计划app经历
    • golang实战大纲
    • golang优秀开发常用开源库汇总
    • 想学习更多golang知识,这里有免费的golang学习笔记专栏
    • 想学习更多前端知识,这里有免费的前端专栏

在 UniApp 中,可以通过以下几种方式为view设置当前视图之外的点击事件:

使用遮罩层和事件监听

  • 在页面中添加一个透明的遮罩层,覆盖整个页面,当点击遮罩层时触发特定的事件。
   <template><view><!-- 你的主要内容 --><view class="content">...</view><!-- 透明遮罩层 --><view class="mask" @tap="onMaskClick"></view></view></template>
   export default {methods: {onMaskClick() {// 处理遮罩层点击事件console.log('遮罩层被点击');}}};

利用页面的原生事件监听

  • 可以通过监听页面的click事件,判断点击位置是否在特定的view之外。
   <template><view @click="onPageClick"><!-- 你的主要内容 --><view class="content">...</view></view></template>
   export default {data() {return {isContentClicked: false};},methods: {onPageClick(event) {const target = event.target;const content = this.$el.querySelector('.content');if (!content.contains(target)) {// 点击在特定 view 之外console.log('特定 view 之外被点击');} else {this.isContentClicked = true;}}}};

这些方法可以根据你的具体需求进行选择和调整,以实现在 UniApp 中为view设置当前视图之外的点击事件。

希望本文对你有所帮助!如果你有任何问题或建议,欢迎在评论区留言。

关注我看更多有意思的文章哦!👉👉

http://www.lryc.cn/news/449545.html

相关文章:

  • 【Mybatis篇】动态SQL的详细带练
  • 【MyBatis-Plus】 学习记录 常用功能及代码生成器使用
  • HalconDotNet实现OCR详解
  • 手搓一个Agent#Datawhale 组队学习Task3
  • 基于SpringBoot+Vue+MySQL的在线酷听音乐系统
  • 大数据实时数仓Hologres(一):Hologres 简单介绍
  • 【鸿蒙HarmonyOS NEXT】数据存储之分布式键值数据库
  • 基于springboot+小程序的儿童预防接种预约管理系统(疫苗1)(源码+sql脚本+视频导入教程+文档)
  • 计算物理精解【8】-计算原理精解【5】
  • 【Linux】 tcp | 解除服务器对tcp连接的限制 | 物联网项目配置
  • 如何隐藏Windows10「安全删除硬件」里的USB无线网卡
  • 【QT Quick】基础语法:导入外部JS文件及调试
  • 【质优价廉】GAP9 AI算力处理器赋能智能可听耳机,超低功耗畅享未来音频体验!
  • 用Flutter几年了,Flutter每个版本有什么区别?
  • 解决Qt每次修改代码后首次运行崩溃,后几次不崩溃问题
  • 语言的变量交换
  • 【muduo源码分析】「阻塞」「非阻塞」「同步」「异步」
  • 顶顶通呼叫中心中间件-机器人话术挂机后是否处理完成事件
  • Springboot Mybatis 动态SQL
  • ORM的了解
  • 关于大模型的10个思考
  • CFR( Java 反编译器)---> lambda 表达式底层实现机制
  • 《C++多态性:开启实际项目高效编程之门》
  • UDS_5_输入输出控制功能单元
  • CAD快捷键
  • Spring6梳理12——依赖注入之注入Map集合类型属性
  • 基于SpringBoot校园失物招领系统设计与实现
  • 推荐4款2024年热门的PDF转ppt工具
  • [深度学习]卷积神经网络CNN
  • 从零开始,Docker进阶之路(三):Docker镜像与命令