uniapp开发app,cover-view不能隐藏,使用v-if,v-show都不行的解决办法

先上解决方案

在最后多写一个v-else

 
     <cover-view class="point-info" v-if="selectedPoint">
      <cover-view class="info-content">
        <cover-view class="info-item">
         。。。
        </cover-view>
        <cover-view class="info-item">
         。。。
        </cover-view>
        <cover-view class="info-item">
        。。。
        </cover-view>
      </cover-view>
    </cover-view>
    <!-- 注意:这里需要使用 v-else  -->
    <cover-view class="point-info-hidden" v-else></cover-view>

本来都听说,Uni APP的坑挺多的,我刚开始没遇到,觉得还好,遇到了很长时间才解决,真的很难受,这是我在别的地方看到了一张图片,上面清晰的记录着问题所在,然后给了我一个解决方案思路,试了一下果然可以,可以看一下这张图片

### 实现 Uni-app 地图点击标记点后显示气泡弹窗 在 Uni-app 中实现地图点击标记点后显示气泡弹窗功能涉及多个方面,包括设置地图组件、监听事件以及处理交互逻辑。 #### 设置地图组件属性 为了使地图能够响应点击事件并显示出相应的信息窗口,在初始化 `map` 组件时需配置好必要的参数。这通常涉及到定义一系列的地标位置作为标记点,并指定这些地点的相关信息用于后续展示给用户[^2]。 ```html <template> <view class="container"> <!-- 使用 map 组件 --> <map id="myMap" :markers="markers"></map> <!-- 定义隐藏的信息窗口模板 --> <cover-view v-if="selectedMarker !== null && showPopup" @tap.stop.prevent="hidePopup()"> <cover-view>{{ selectedMarker.title }}</cover-view> <cover-view>{{ selectedMarker.description }}</cover-view> </cover-view> </view> </template> ``` #### 处理点击事件与状态管理 当用户点击某个特定的地图标记时触发回调函数来更新应用的状态变量,从而决定何时何地呈现哪个信息窗口的内容。此过程可能还需要调用 API 获取额外的数据以便更全面地描述所选的位置。 ```javascript <script lang="ts"> import { ref } from 'vue'; export default { setup() { const markers = [ // 初始化一些 marker 数据... ]; let selectedMarker = ref(null); let showPopup = ref(false); function onMarkerTap(e) { const index = e.detail.callout.index; selectedMarker.value = markers[index]; showPopup.value = true; setTimeout(() => { uni.createMapContext('myMap').moveToLocation({ latitude: selectedMarker.value.latitude, longitude: selectedMarker.value.longitude }); }, 0); } return { markers, selectedMarker, showPopup, hidePopup() { showPopup.value = false; }, onMarkerTap }; } } </script> ``` #### 动态调整视图比例 考虑到用户体验优化的需求,可以在打开信息窗口之前先将视角聚焦于被选中的标记处,然后再适当放大缩小以获得最佳视觉效果。可以利用 `uniapp.getScale()` 方法获取当前设备屏幕尺寸下的缩放因子,进而动态调节地图的比例尺[^3]。 ```javascript // 假设已经绑定了 click 事件处理器 onMarkerTap(e){ ... // 移动到目标坐标后再执行一次 zoom 操作 uni.createMapContext('myMap').getScale((res)=>{ console.log(res.scale); // 输出当前缩放级别 // 自定义增量值进行缩放操作 res.scale += 1; // 或者 -= 1 取决于需求 this.mapCtx.moveToLocation({...}); this.mapCtx.setZoom({zoom: Math.min(Math.max(3, res.scale), 18)}); }) } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值