总共三个nvue文件:
c-list.nvue
c-modal.nvue
map.nvue
<template>
<view class="map-container">
<view style="flex:1;background:blue;"></view>
<!-- 真机再用map替换显示 不然模拟器很卡容易异常死机-->
<!-- <map style="flex:1"></map> -->
</view>
<!-- 全屏覆盖层 -->
<cover-view class="cover-view1">
<view class="view1">
<view class="btns" v-if="isShowBtns">
<view class="btn" >
<text class="btn" @click="tab(1)" :class="{'active1': activeIndex === 1}">普通</text>
</view>
<view class="btn" @click="tab(2)">
<text class="btn" :class="{'active2': activeIndex === 2}">卫星</text>
</view>
</view>
<view class="add-marker" v-else>
<text class="save-btn" @click="save()">保存</text>
<image class="marker" src="../../static/images/location.png"/>
</view>
</view>
<view class="view2">
<image class="image" src="../../static/images/location.png" @click="getLocation()"></image>
<view class="camera-list" @click="openList1()">
<text class="camera-text">相机列表</text>
</view>
</view>
<view>
<c-model ref="model1" :dataList="dataList1" @clickItem="openList2"></c-model>
<c-model ref="model2" :dataList="dataList2" :isItemCloseModal="false"></c-model>
</view>
</cover-view>
</template>
<style lang="scss">
$border: 1px solid transparent;
$btnRedius: 40rpx;
.map-container{
flex: 1;
border: $border;
}
.cover-view1{
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 100rpx;
border: $border;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.view1{
border: $border;
height: 200px;
pointer-events: none; /* 允许点击穿透到下层 */
}
.btns {
display: flex;
flex-direction: row;
margin: 10px;
border-radius: $btnRedius;
background: #ccc;
}
.btn{
flex: 1;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 15px;
font-weight: bold;
border: $border;
}
.active1{
background: green;
border-top-left-radius: $btnRedius;
border-bottom-left-radius: $btnRedius;
}
.active2{
background: green;
border-top-right-radius: $btnRedius;
border-bottom-right-radius: $btnRedius;
}
.view2{
// flex: 1 等价于 100%,默认是column方向的100%;
// 可以通过改变方向row; 还有width:750rpx也是100%意思
height: 350rpx;
width: 750rpx;
border: $border;
pointer-events: auto; /* 子元素恢复点击 */
}
.image{
position: absolute;
width: 40px;
height: 40px;
bottom: 250rpx;
left: 20rpx;
}
.camera-list{
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
background: rgba(0,0,0,0.3);
}
.camera-text{
color: #fff;
}
.add-marker{
flex: 1;
display: flex;
align-items: center;
height: 200rpx;
}
.save-btn{
position: absolute;
top: 10px;
right: 10px;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background: green;
color: #fff;
}
.marker{
width: 40px;
height: 40px;
top: 100px;
}
</style>
<template>
<view class="container">
<!-- 遮罩层(重新启用并优化) -->
<!-- <view
v-if="isShowModal && showModal"
class="mask"
@click="closeModal"
:style="{opacity: maskOpacity}"
></view> -->
<!-- 弹窗内容 -->
<view v-if="showModal">
<view
class="modal"
ref="animElement"
:style="{height: actualMaxHeight}"
>
<view class="modal-content">
<!-- 弹窗头部 -->
<view class="modal-header">
<view class="modal-title">
<text class="title" v-if="title">{{title}}</text>
</view>
<view class="close-wrapper" @click="closeModal">
<image
class="close"
src="../../static/images/close.png"
></image>
</view>
</view>
<!-- 可滚动内容区域 -->
<scroll-view class="scroll-list" scroll-y>
<c-list :dataList="dataList" @clickItem="clickItem"></c-list>
</scroll-view>
</view>
</view>
</view>
</view>
</template>
<template>
<scroll-view class="scroll-view" scroll-y="true">
<recycle-list
for="(item, i) in longList"
key-field="id"
style="width: 750rpx;"
>
<cell-slot scope="item">
<view class="item" @click="handleItemClick(item)">
<text class="item-text">{{item.name}}</text>
<text class="item-image">{{item.isChecked ? '✅' : '未选中'}}</text>
</view>
</cell-slot>
</recycle-list>
</scroll-view>
</template>