uniapp 微信小程序项目中 地图 map组件 滑动面板

组件代码 components/custom-slider/index.vue

javascript 复制代码
<template>
  <view
    class="panel"
    @touchstart="handleTouchStart"
    @touchmove.stop="throttleHandleTouchMove"
    @touchend="handleTouchEnd"
    :style="{ transform: `translateY(${panelTranslateY}px)` }"
  >
    <view class="panel-handle"></view>
    <view class="panel-content">
      <slot></slot>
    </view>
  </view>
</template>
<script>
function throttle(func, delay) {
  let timer = null
  return function (...args) {
    if (!timer) {
      func.apply(this, args)
      timer = setTimeout(() => {
        timer = null
      }, delay)
    }
  }
}
export default {
  props: {
    baseHeight: {
      type: Number,
      default: 200
    }
  },
  data() {
    const { windowHeight } = wx.getSystemInfoSync()
    return {
      isDragging: false,
      screenHeight: windowHeight,
      panelTranslateY: 0,
      totalHeight: 0,
      initPanelHeight: 0,
      lastMoveTime: 0,
      lastY: 0,
      startY: 0,
      accelerationFactor: 1,
      elasticFactor: 0.3
    }
  },
  created() {
    this.throttleHandleTouchMove = throttle(this.handleTouchMove, 16)
  },
  methods: {
    getClientRect(selector) {
      const query = wx.createSelectorQuery().in(this)
      return new Promise((resolve) => {
        query
          .select(selector)
          .boundingClientRect((rect) => {
            resolve(rect)
          })
          .exec()
      })
    },
    async initPanel() {
      this.resetPanel()
      await this.getPanel()
      this.panelTranslateY = this.initPanelHeight
    },
    resetPanel() {
      this.panelTranslateY = 0
      this.totalHeight = 0
    },
    async getPanel() {
      await this.$nextTick()
      const panelRect = await this.getClientRect('.panel')
      const { height } = panelRect
      this.totalHeight = height
      this.initPanelHeight = height - this.baseHeight
    },
    handleTouchStart(e) {
      this.startY = e.touches[0].clientY
      this.isDragging = true
      this.lastMoveTime = Date.now()
      this.lastY = this.startY
      this.accelerationFactor = 1
    },
    handleTouchMove(e) {
      if (this.isDragging) {
        const currentY = e.touches[0].clientY
        const currentTime = Date.now()
        const deltaY = currentY - this.lastY
        const deltaTime = currentTime - this.lastMoveTime
        const speed = Math.abs(deltaY / deltaTime)
        this.accelerationFactor = 1 + speed * 0.5
        const adjustedDeltaY = deltaY * this.accelerationFactor
        let newTranslateY = this.panelTranslateY + adjustedDeltaY
        if (newTranslateY < 0) {
          newTranslateY = newTranslateY * this.elasticFactor
        } else if (newTranslateY > this.initPanelHeight) {
          newTranslateY =
            this.initPanelHeight +
            (newTranslateY - this.initPanelHeight) * this.elasticFactor
        }
        newTranslateY = Math.min(
          Math.max(newTranslateY, -this.initPanelHeight * this.elasticFactor),
          this.initPanelHeight + this.initPanelHeight * this.elasticFactor
        )
        this.panelTranslateY = newTranslateY
        this.lastY = currentY
        this.lastMoveTime = currentTime
      }
    },
    handleTouchEnd() {
      this.isDragging = false
      if (this.panelTranslateY < 0) {
        this.panelTranslateY = 0
      } else if (this.panelTranslateY > this.initPanelHeight) {
        this.panelTranslateY = this.initPanelHeight
      }
    }
  }
}
</script>

<style scoped lang="scss">
.panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 20rpx;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  z-index: 30;
  transition: transform 0.3s ease;
  will-change: transform;

  .panel-handle {
    width: 60rpx;
    height: 6rpx;
    border-radius: 3rpx;
    background: #f0f0f0;
    margin: 16rpx auto 24rpx;
  }
}
</style>

页面使用

javascript 复制代码
<template>
  <view class="index">
    <map style="width: 100%; height: 100%"></map>
    <CustomSlider ref="slider">
      <view v-for="(item, index) in list" :key="index">
        <view class="item">
          <text>{{ item.name }}</text>
          <text>{{ item.value }}</text>
        </view>
      </view>
    </CustomSlider>
  </view>
</template>

<script>
import CustomSlider from '../../components/custom-slider/index.vue'
export default {
  components: {
    CustomSlider
  },
  data() {
    return {
      list: []
    }
  },
  onLoad() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      setTimeout(() => {
        for (let i = 0; i < 100; i++) {
          this.list.push({
            name: '商品' + i,
            value: '价格' + i
          })
        }
        this.$refs.slider.initPanel()
      }, 2000)
    }
  }
}
</script>

<style>
page {
  height: 100%;
  width: 100%;
}
</style>
<style lang="scss">
.index {
  height: 100%;
  position: relative;
}
.item {
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
</style>

效果展示

相关推荐
百思可瑞教育5 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
项目題供诗7 小时前
微信小程序开发教程(八)
微信小程序·小程序
Q_Q196328847511 小时前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
百思可瑞教育13 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e14 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
00后程序员张14 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
拼图20918 小时前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
不知名的前端专家19 小时前
uniapp原生插件 TCP Socket 使用文档
网络·tcp/ip·uni-app·netty
fakaifa20 小时前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版
2501_9160074721 小时前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview