Uniapp 实现微信小程序滑动面板功能详解

文章目录

前言
一、功能概述
二、实现思路
三、代码实现
总结

前言

Uniapp 实现微信小程序滑动面板功能详解

一、功能概述

滑动面板是移动端常见的交互组件，通常用于在页面底部展开内容面板。本文将介绍如何使用 Uniapp 开发一个支持手势滑动的底部面板组件，实现以下核心功能：
触摸滑动调整面板高度
边界限制
与地图组件的层级适配

二、实现思路

使用 Uniapp 框架实现跨平台兼容
通过 CSS transform 实现动画效果
基于微信小程序触摸事件体系
结合选择器 API 获取元素尺寸
触摸事件监听：捕获 touchstart/touchmove/touchend 事件
滑动距离计算：通过 clientY 坐标差值计算滑动距离
边界限制：确保面板在允许的高度范围内滑动
弹性动画：使用 CSS transition 实现平滑过渡
层级管理：通过 z-index 控制与其他组件的层级关系

三、代码实现

<template><viewclass="slider-panel"@touchstart="handleTouchStart"@touchmove.stop.prevent="handleTouchMove"@touchend="handleTouchEnd":style="{'min-height': `${initialPosition}px`,transform: `translateY(${translateY}px)`}"><view class="slider-panel-handle"></view><view class="slider-panel-content"><slot></slot></view></view>
</template>
<script>
export default {name: 'SliderPanel',props: {initialPosition: {type: Number,default: 100},deltaYThreshold: {type: Number,default: 100}},data() {return {isDragging: false,startY: 0,translateY: 0,panelHeight: 0,panelInitialShowHeight: 0}},async mounted() {const { height } = await this.getSelectorRect('.slider-panel-content')this.panelHeight = heightif (this.initialPosition > this.panelHeight) {this.panelInitialShowHeight = this.panelHeight} else {this.panelInitialShowHeight = height - this.initialPositionthis.translateY = this.panelInitialShowHeight}},methods: {getSelectorRect(selector) {const query = wx.createSelectorQuery().in(this)return new Promise((resolve) => {query.select(selector).boundingClientRect((rect) => {resolve(rect)}).exec()})},handleTouchStart(event) {const { clientY } = event.touches[0]this.isDragging = truethis.startY = clientY},handleTouchMove(event) {if (this.isDragging) {const { clientY } = event.touches[0]const deltaY = clientY - this.startYthis.startY = clientYthis.translateY += deltaYif (this.translateY < 0) {this.translateY = 0}if (this.translateY > this.panelInitialShowHeight) {this.translateY = this.panelInitialShowHeight}}},handleTouchEnd() {this.isDragging = false}}
}
</script><style scoped lang="scss">
.slider-panel {position: fixed;width: 100%;box-sizing: border-box;left: 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;will-change: transform;.slider-panel-handle {width: 60rpx;height: 6rpx;border-radius: 3rpx;background: #f0f0f0;margin: 16rpx auto 24rpx;}
}
</style>

<template><view class="container"><map style="width: 100%; height: 100%" :enable-scroll="false"></map><slider-panel><view v-for="item in 20" :key="item"><view class="item">{{ item }}</view></view></slider-panel></view>
</template>
<script>
import SliderPanel from '@/components/sliderPanel'
export default {components: {SliderPanel},data() {return {}},methods: {}
}
</script><style lang="scss">
page {height: 100%;width: 100%;
}
</style><style scoped lang="scss">
.container {position: relative;height: 100%;width: 100%;overflow: hidden;.item {display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #ccc;height: 80rpx;}
}
</style>