w***@foxmail.com
w***@foxmail.com
  • 发布:2021-11-20 15:32
  • 更新:2023-08-27 13:57
  • 阅读:2228

uniapp 小程序端 图片上点击热区问题

分类:uni-app

按照源生html写法

复制代码<img :src="src" mode="aspectFill" usemap="#map"></img>    
<map name="map" id="map">    
  <area shape="polygon" coords="1, 1, 1, 1, 1, 1" title="1" @click="cl">    
</map>

由于html的map标签跟uniapp的map组件冲突,map会被解析成uni-map标签导致失效。
用了坛子里同学提供的vue的创建虚拟dom的方法
render: function(createElement) {
return createElement('map', this.$slots.default)
}
这种只在编译成Html下有用,编译成小程序时还是失效的

请问各位英雄:一张图片上有多个点击热区在uniapp 小程序端中有什么适用的解决方案么?

万分感谢

2021-11-20 15:32 负责人:无 分享
已邀请:
aoaobaba

aoaobaba - 稳中有进 别急~ 慢慢来

试试我搞的工具,https://lab.aoaoms.com/#/image-area ,超级方便,

  • 1***@163.com

    打不开了,能重新发一下吗

    2023-07-21 14:14

  • aoaobaba

    回复 1***@163.com: 没什么人用,我就撤网了。如果需要,我再发布。

    2024-11-11 09:12

yantaicy

yantaicy

楼主解决了吗?编译成app也点击无效

平安2638411356

平安2638411356

楼主这个问题解决了吗?

yantaicy

yantaicy

解决了,用render.js

  • 小白需要帮助

    你好,能说说render.js怎么解决图片热区app点击无效的问题嘛?

    2023-11-04 16:03

  • yantaicy

    回复 小白需要帮助: 我重新看了一下,不是render.js,是先记录了各个图形块的边界位置,然后根据点击的xy坐标,判断点击位置是否位于某个图形块中

    2023-11-27 14:51

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容