- 发布:2022-12-22 14:19
- 更新:2022-12-22 14:24
- 阅读:229
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 21H2
HBuilderX类型: 正式
HBuilderX版本号: 3.6.14
手机系统: 全部
手机厂商: 华为
页面类型: nvue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
<template>
<view class="content">
<map class="map"
:longitude="map.lng"
:latitude="map.lat"
:controls="map.controls ? [{
id: 0,
position: {
width: 40,
height: 40,
top: (screen.height/2) - 39,
left: (screen.width/2) - 20
},
iconPath: '/static/location.png'
}] : []"
:show-location="map.location"></map>
<view class="butt">
<button size="mini" type="primary" @click="clickFun">点击</button>
</view>
</view>
</template>
<script setup>
// 控件图标在附件中
import { onMounted, reactive } from "vue";
const map = reactive({
lng: null,
lat: null,
// 控件显隐
controls: false,
// 定位点显隐
location: true,
});
// 计算控件位置
const screen = reactive({
width: 0,
height: 0
});
onMounted(() => {
uni.getSystemInfo({
success(res) {
screen.height = res.screenHeight;
screen.width = res.screenWidth;
}
})
uni.getLocation({
type: 'gcj02',
success (res) {
map.lng = res.longitude;
map.lat = res.latitude;
},
})
});
const clickFun = function () {
map.location = !map.location;
map.controls = !map.controls;
}
</script>
<style>
.content {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.map {
flex: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.butt {
width: 50px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 40px;
right: 10px;
z-index: 100;
}
</style>
<template>
<view class="content">
<map class="map"
:longitude="map.lng"
:latitude="map.lat"
:controls="map.controls ? [{
id: 0,
position: {
width: 40,
height: 40,
top: (screen.height/2) - 39,
left: (screen.width/2) - 20
},
iconPath: '/static/location.png'
}] : []"
:show-location="map.location"></map>
<view class="butt">
<button size="mini" type="primary" @click="clickFun">点击</button>
</view>
</view>
</template>
<script setup>
// 控件图标在附件中
import { onMounted, reactive } from "vue";
const map = reactive({
lng: null,
lat: null,
// 控件显隐
controls: false,
// 定位点显隐
location: true,
});
// 计算控件位置
const screen = reactive({
width: 0,
height: 0
});
onMounted(() => {
uni.getSystemInfo({
success(res) {
screen.height = res.screenHeight;
screen.width = res.screenWidth;
}
})
uni.getLocation({
type: 'gcj02',
success (res) {
map.lng = res.longitude;
map.lat = res.latitude;
},
})
});
const clickFun = function () {
map.location = !map.location;
map.controls = !map.controls;
}
</script>
<style>
.content {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.map {
flex: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.butt {
width: 50px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 40px;
right: 10px;
z-index: 100;
}
</style>
操作步骤:
1、初始map.controls为false,map.location为true;点击按钮两个参数布朗值置换。
2、初始map.controls为true,map.location为false;点击按钮两个参数布朗值置换。
1、初始map.controls为false,map.location为true;点击按钮两个参数布朗值置换。
2、初始map.controls为true,map.location为false;点击按钮两个参数布朗值置换。
预期结果:
1、页面加载完有定位点图标,没有控件;点击按钮后定位点消失,控件出现;继续点击按钮如此循环。
2、页面加载完有控件,没有定位点图标;点击按钮后控件消失,定位点出现;如此循环。
1、页面加载完有定位点图标,没有控件;点击按钮后定位点消失,控件出现;继续点击按钮如此循环。
2、页面加载完有控件,没有定位点图标;点击按钮后控件消失,定位点出现;如此循环。
实际结果:
1、页面加载完有定位点图标,没有控件,显示正常;点击按钮后定位点消失,控件出现,显示正常;继续点击按钮定位点没有出现,控件也没有消失,无论怎么点击都没有改变。
2、页面加载完没有定位点图标,有控件,显示正常;点击按钮后定位点出现,控件没有消失;再次点击按钮定位点消失;接着继续点击按钮定位点不会出现,控件一直没有消失。
1、页面加载完有定位点图标,没有控件,显示正常;点击按钮后定位点消失,控件出现,显示正常;继续点击按钮定位点没有出现,控件也没有消失,无论怎么点击都没有改变。
2、页面加载完没有定位点图标,有控件,显示正常;点击按钮后定位点出现,控件没有消失;再次点击按钮定位点消失;接着继续点击按钮定位点不会出现,控件一直没有消失。
bug描述:
-
在nvue页面地图尝试通过变量控制show-location的显隐时
- 如果变量初始为false,页面中没有定位图标,设置为true后,图标出现,当设为false后再次设为true时,图标消失后i就不能显示出来。
- 如果变量初始为true,页面中出现了定位图标,设为false后图标消失,此时再重新设置为true,图标不能再次显示。
-
在nvue页面地图通过变量和三元表达式控制controls数组内容时
三元表达式逻辑为:variable?[{ 控件数据对象 }]:[],为true是需要展示的控件,为false是一个空数组- 如果变量初始为false,将变量设为true后控件显示出来,但是接下来无论怎么修改变量,控件都不会消失
- 如果变量初始为true,此时控件从页面加载完就没有出现,并且接下来无论怎么操作都不会显示