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>

效果图

在这里插入图片描述

相关推荐
00后程序员张25 分钟前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
浪裡遊35 分钟前
MUI组件库与主题系统全面指南
开发语言·前端·javascript·vue.js·react.js·前端框架·node.js
CoderYanger1 小时前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
2501_915921431 小时前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
软件技术NINI1 小时前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI1 小时前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
梵得儿SHI3 小时前
Vue 开发环境搭建全指南:从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理
Q_Q5110082854 小时前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app
金梦人生4 小时前
Css性能优化
前端·css
写代码的皮筏艇4 小时前
CSS属性继承与特殊值
前端·css