uniapp实现外卖的订单地图

前言

本文所实现的只是UI交互，效果类似于外卖的订单地图，可全屏显示地图以及展示订单信息等。

布局

html部分

<template>
    <view class="container">
        <map class="map_wrap"></map>
        <view class="detail">
           <view class="card">
                <view class="touch_line"></view>
                <view> 订单操作</view>
                <view v-for="item in 10" :key="item" style="margin-bottom: 20rpx">操作{{ item }}</view>
                <view>订单信息</view>
                <view>产品名称：隆江猪脚饭</view>
                <view>价格：￥100</view>
                <view>数量:1</view>
                <view>备注：多加辣椒</view>
            </view>
            <view class="card">
                <view>订单操作</view>
                <view v-for="item in 10" :key="item" style="margin-bottom: 20rpx">操作{{ item }}</view>
                <view>订单信息</view>
                <view>产品名称：隆江猪脚饭</view>
                <view>价格：￥100</view>
                <view>数量:1</view>
                <view>备注：多加辣椒</view>
            </view>
        </view>
    </view>
</template>

样式部分

最外层设置视口高度，地图使用绝对定位。因为需要在地图上方显示详情信息，所以只有用定位的方式，目前小程序原生组件是支持z-index按照大小进行同层级渲染。

.container {
    min-height: 100vh;
}
.map_wrap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.detail {
    position: relative;
    z-index: 3;
    background-color: #f5f5f5;
}

此时的效果是全覆盖在地图上方，因为内容已经超出，滑动详情信息可以上下滚动
这时候有同学就要问了，订单地图，地图呢？？
不急，我知道你很急，但是请你先别急

地图出现

地图只需要一行样式代码

.detail {
    position: relative;
    z-index: 3;
    background-color: #f5f5f5;
    margin-top: calc(100vh * 0.55)
}

润色

 .card {
        border-radius: 16rpx;
        margin-top: 20rpx;
        padding: 20rpx;
        box-sizing: border-box;
        background-color: #ffffff;
    }
    .touch_line {
        width: 100%;
        height: 36rpx;
        position: relative;
        &::before {
            content: '';
            position: absolute;
            width: 54rpx;
            height: 2rpx;
            background: #e4e4e4;
            top: 9rpx;
            left: 50%;
            transform: translateX(-50%);
        }
        &::after {
            content: '';
            position: absolute;
            width: 54rpx;
            height: 2rpx;
            background: #e4e4e4;
            top: 15rpx;
            left: 50%;
            transform: translateX(-50%);
        }
    }

完整代码

<template>
    <view class="container">
        <map class="map_wrap"></map>
        <view class="detail">
            <view class="card">
                <view class="touch_line"></view>
                <view> 订单操作</view>
                <view v-for="item in 10" :key="item" style="margin-bottom: 20rpx">操作{{ item }}</view>
                <view>订单信息</view>
                <view>产品名称：隆江猪脚饭</view>
                <view>价格：￥100</view>
                <view>数量:1</view>
                <view>备注：多加辣椒</view>
            </view>
            <view class="card">
                <view>订单操作</view>
                <view v-for="item in 10" :key="item" style="margin-bottom: 20rpx">操作{{ item }}</view>
                <view>订单信息</view>
                <view>产品名称：隆江猪脚饭</view>
                <view>价格：￥100</view>
                <view>数量:1</view>
                <view>备注：多加辣椒</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.container {
    min-height: 100vh;
}
.map_wrap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.detail {
    position: relative;
    z-index: 3;
    background-color: #f5f5f5;
    margin-top: calc(100vh * 0.55);
    .card {
        border-radius: 16rpx;
        margin-top: 20rpx;
        padding: 20rpx;
        box-sizing: border-box;
        background-color: #ffffff;
    }
    .touch_line {
        width: 100%;
        height: 36rpx;
        position: relative;
        &::before {
            content: '';
            position: absolute;
            width: 54rpx;
            height: 2rpx;
            background: #e4e4e4;
            top: 9rpx;
            left: 50%;
            transform: translateX(-50%);
        }
        &::after {
            content: '';
            position: absolute;
            width: 54rpx;
            height: 2rpx;
            background: #e4e4e4;
            top: 15rpx;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}
</style>

存在的问题

• 在示例中，最外层使用了min-height：100vh，这个设置最小高度内容肯定是会超出滚动的，小程序会显示滚动条，目前小程序用h5的方式隐藏滚动条是失效的。
• 示例中没有使用自定义导航栏，这个可以自己处理。还可以实现比如滑动一定距离，显示头部导航栏以及导航栏背景颜色的透明度这些。
• 目前我是写uniapp项目，如果有遇到坑或者难点问题，可以互相交流学习。