vue + uniapp 实现仿百度地图/高德地图/美团/支付宝 滑动面板 纯css 实现

概要

使用百度地图、各种单车APP时,对地图上的滑动面板很感兴趣,于是根据自己的理解实现了一下

之前用的js实现,滑动的时候没有原生好

这一次用的css实现

代码

javascript 复制代码
<template>
  <view class="container">
    <map
      style="
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 0;
      "
      :enable-scroll="!isPanelTouched"
    ></map>
    <view
      style="
        height: 500rpx;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: -1;
      "
    ></view>
    <view
      class="panel"
      @touchstart="onPanelTouchStart"
      @touchend="onPanelTouchEnd"
    >
      <view class="handle"></view>
      <view class="item" v-for="item in 50" :key="item">
        {{ item }}
      </view>
    </view>
    <view
      v-if="isPanelTouched"
      class="mask"
      @touchstart.stop.prevent
      @touchmove.stop.prevent
      @touchend.stop.prevent
    ></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isPanelTouched: false
    }
  },
  methods: {
    onPanelTouchStart() {
      this.isPanelTouched = true
    },
    onPanelTouchEnd() {
      this.isPanelTouched = false
    }
  }
}
</script>

<style scoped lang="scss">
.panel {
  position: relative;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 2;
  .handle {
    height: 30px;
    background-color: #eee;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    &::after {
      content: '';
      width: 30px;
      height: 3px;
      background-color: #999;
      border-radius: 3px;
    }
  }
  .content {
    height: calc(100% - 30px);
    overflow-y: auto;
  }
  .item {
    text-align: center;
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0);
}
</style>

效果图

在这里插入图片描述

相关推荐
Gracemark10 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_233310 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
前端Hardy11 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy11 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼11 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_13 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing13 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
墨渊君15 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
iOS阿玮15 小时前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
最后一个农民工15 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js