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>

效果图

在这里插入图片描述

相关推荐
JNU freshman11 小时前
Element Plus组件
前端·vue.js·vue3
软件技术NINI11 小时前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
2501_9159214312 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手12 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
雪芽蓝域zzs12 小时前
uniapp 修改android包名
android·uni-app
芒果沙冰哟12 小时前
uniapp canvas实现手写签字功能(包括重签,撤回等按钮)
uni-app
爱折腾的小码农12 小时前
uni-app 小程序开发避坑:诡异的 `module ‘...‘ is not defined` 错误与我的解决方案
uni-app
Q_Q196328847512 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
长空任鸟飞_阿康12 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能
~无忧花开~13 小时前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体