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

360免费做网站顶尖文案

news 2026/4/6 19:00:02

360免费做网站,顶尖文案,济南个人急售二手房,网站营销推广的公司最近遇到一个需求需要使用uniapp的map自定义气泡 ，做完之后发现在模拟器上好好的，ios真机不显示，安卓页数时好时不好的一番查询发现是小程序的老问题了，网上的方法都试了也没能解决后来看到有人说用nvue可以正常显示&#xff0c…

最近遇到一个需求需要使用uniapp的map自定义气泡，做完之后发现在模拟器上好好的，ios真机不显示，安卓页数时好时不好的
一番查询发现是小程序的老问题了，网上的方法都试了也没能解决
后来看到有人说用nvue可以正常显示，所以记录一下使用nvue遇到的问题

nvue介绍文档
https://uniapp.dcloud.net.cn/tutorial/nvue-css.html

需要注意的是

class 进行绑定时只支持数组语法
没有z-index概念，代码越靠后层级越高

另外，使用 slot=“callout” 进行自定义气泡时，cover-view 标签会因为循环导致所有气泡宽度都一样大，而不是根据内容自适应，这个问题可以通过再加一层cover-view ，不再:marker-id 的层级上写样式解决

在这里插入图片描述
参考链接：https://blog.csdn.net/weixin_42028275/article/details/135977705

<mapid="mymap"v-if="isShow && markers.length>0"v-show="!isVertical" style="width: 100vw; height: 100vh;":show-location="true":show-compass="true":markers="markers":longitude="locaInfo.longitude":latitude="locaInfo.latitude"@callouttap="callouttap"@regionchange="regionchange"><!-- 使用callout进行自定义 --><cover-view slot="callout"><!-- <template> --><cover-view v-for="(item,index) in markers":marker-id="item.id":key='index'><cover-view class="marker-item"><cover-view class="marker-box" :class="[item.options.isActive?'FF8D1A':'']"><cover-image class="position-absolute" style="margin-right: 5px; width: 30rpx; height: 30rpx;" :src="aliy+item.options.img"></cover-image><cover-view></cover-view><cover-view>{{item.options.labelName}}</cover-view></cover-view><cover-image class="marker-bg" :src="item.options.isActive ? aliy+item.options.active_bg : aliy+item.options.bg"></cover-image><!-- 右侧点 --><cover-view class="sales-status" :class="'sales-status'+item.options.salesStatus"></cover-view></cover-view></cover-view><!-- </template> --></cover-view>
</map>