如何实现uniapp热区链接
如何实现uniapp热区链接

如何实现uniapp热区链接

什么是热区链接呢?实际上热区链接就是在一张图片上某些区域是可点击的,通常会用在区域地图,或者给图片某些区域加上提示以及点击某个区域进行跳转。图像热区链接在普通的html中是可行的,但是在uni-app中使用map标签就会直接出现地图。

那么这是为什么呢?看了uni-app的官网发现,<map></map>标签在uni-app中是其封装的一个地图组件,因为原生的map标签和uni-app的map地图组件标签的名称冲突了,所以在uni-app里面识别map标签就只能按照封装好的组件识别为地图。那么问题来了,有没有什么办法来解决呢?下面来说一说是如何解决的。

第一步,安装Dreamweaver来画出图像的热点区域,用来获取图像区域的坐标点。首先Ctrl+N新建一个html文件,然后Ctrl+Alt+I插入一张图片,最后就是使用软件的“属性”来画出区域(可能刚使用软件找不到“属性”,可使用快捷键Ctrl+F3显示)。画图的话要先点击图片后才可以,然后根据实际情况选择使用的热点工具是圆形、矩形、还是多边形。
第二步,就可以开始画图了,其中area标签就是我们需要的。

第三步,最终代码。

<template id=”first”>
    <view class=”content”>
        <!– 注意,这里使用img标签,不要使用image标签,否者没有效果 –>
        <img class=”logo” src=”/static/logo.png” border=”0″ usemap=

https://blog.csdn.net/BenChiZhuBaDaoWang/article/details/127869308

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注