基于uni-app的微信小程序Map事件穿透处理

这篇具有很好参考价值的文章主要介绍了基于uni-app的微信小程序Map事件穿透处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

基于uni-app的微信小程序Map事件穿透处理

背景

业务需要在微信小程序中使用地图组件,上面需要有点位及点位的交互,同时地图上也会有一些悬浮的按钮、弹窗之类的。在微信小程序2.8.x的版本之后,地图这种原生组件是支持同层渲染的,也就是可以通过样式控制层级。在开发者工具中表现正常,但是上了真机后会发现点击事件会穿透(其实主要是marker的事件)。于是在微信社区找解决方案,结果又回到了用cover-image和cover-view的方式。这样又无法满足一些弹层(比如弹层中需要评论功能,需要使用input)的场景。文章来源地址https://www.toymoban.com/news/detail-500172.html

问题描述

demo

<template><view class="map_page_container"><mapclass="map"@tap="handleClickMap"@markertap="handleClickMarker"latitude="30.654228"longitude="104.066558":markers="markersList"></map><!-- 测试弹层穿透情况 --><div class="float_container" @tap="handleClickPrevent"><!-- input用于测试focus时的情况 --><input /><!-- 按钮用于测试点击穿透情况--><button @tap="handleClickButton">测试按钮</button></div></view>
</template>
<script> export default {data() {return {markersList: [{id: '1',latitude: '30.654228',longitude: '104.066558',iconPath: '/static/images/ge/guide.png',},],};},methods: {handleClickMap() {console.log('click map');},handleClickButton() {console.log('click button');},handleClickMarker(event) {console.log('click ma

到了这里,关于基于uni-app的微信小程序Map事件穿透处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序阻止手机自带的滑动返回退出事件(uni-app,微信小程序,page-container)

    1、使用page-container前先在pages.json配置(重点!) 2、在页面中配置 @touchstart.native和@touchmove.native是用于遮罩层滑动的监听事件 关于page-container 的一些属性 详细可以按照官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

    2024年02月11日
    浏览(54)
  • Uni-app开发小程序|基于微信小程序报修系统设计与实现

    作者主页:编程指南针 作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库

    2024年02月15日
    浏览(59)
  • Uni-app前端开发|基于微信小程序的快递运输管理系统

    作者主页:编程千纸鹤 作者简介:Java、前端、Python开发多年,做过高程,项目经理,架构师 主要内容:Java项目开发、Python项目开发、大学数据和AI项目开发、单片机项目设计、面试技术整理、最新技术分享 收藏点赞不迷路  关注作者有好处 文末获得源码 语言环境:Java: 

    2024年02月16日
    浏览(105)
  • 基于微信小程序的点餐系统源码/基于uni-app点餐系统app【有多种UI样式】

    目录 一、整体目录(示范): 文档含项目技术介绍、E-R图、数据字典、项目功能介绍与截图等 二、运行截图 三、代码部分(示范): 四、数据库表(示范): 数据库表有注释,可以导出数据字典及更新数据库时间,欢迎交流学习 五、主要技术介绍: 六、项目调试学习(点击

    2024年02月10日
    浏览(44)
  • 微信小程序uni-app

    小程序 是一种不需要下载、安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下就能打开应用,也实现了用完即走的理念,用户不用安装太多应用,应用随处可用,但又无须安装卸载。 微信开发文档 1、工作原理 网页开发,渲染线程和脚本是互斥的

    2024年02月10日
    浏览(119)
  • 微信小程序授权(uni-app)

    概述 为了避免重复开发,自己封装了一个通用用户授权回调方法,只需要传入需要授权的scope,权限中文描述、回调函数,就可以实现一整套小程序是否授权、打开授权设置,调用后续操作函数的工作 功能 可以根据自己的实际应用进行微调 目前使用的uni-app版本,可以根据自

    2024年02月16日
    浏览(80)
  • 语法速通 uni-app随笔【uni-app】【微信小程序】【vue】

    其中, pages 目录/ index 目录【必有】: index.js 编写业务逻辑 【初始数据,生命周期函数】 index.json 编写配置 index.wxml 编写模板 【可理解为本页html】 index.wxss 【可理解为本页css】 直接输入敲回车,连尖括号都不需要就可以标签补全 1)初始数据写死 在 index.wxml 引入变

    2024年02月12日
    浏览(165)
  • uni-app微信小程序使用echarts

    前言:本来是使用的ucharts,但因为无法监听图例点击交互,满足不了需求,所以只能放弃。 首先,下载echart组件。可以先随便建个文件夹,然后 npm init。接着下载依赖 然后找到 node_modulesmpvue-echarts下的文件,如图 只留下src,其他的删掉(没有用到)。然后复制 mpvue-echart

    2024年02月10日
    浏览(68)
  • uni-app 微信小程序 激励视频广告

    封装激励视频-Ad.js 调用上面写的方法:

    2024年02月12日
    浏览(76)
  • 【uni-app微信小程序】实现支付功能

    实现微信支付功能需要在小程序后台配置支付相关信息,并且在前端代码中调用微信支付API进行支付操作。好的, uni-app微信小程序实现支付功能整体流程 大致如下: 注册微信公众平台,并完成开发者资质认证; 在微信商户平台注册商户账号,并完成商户资质认证; 在商户

    2024年02月13日
    浏览(95)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包