当前位置：首页 > uni-app

uniapp上滑窗口

2026-03-05 15:01:56uni-app

实现上滑窗口的基本思路

在UniApp中实现上滑窗口效果，通常需要结合<movable-area>和<movable-view>组件，或通过CSS动画控制元素的transform属性。以下是两种常见实现方式：

uniapp上滑窗口

使用movable-area组件

创建可拖拽区域，通过触摸事件控制窗口上下滑动：

uniapp上滑窗口

<template>
  <movable-area class="area">
    <movable-view 
      class="view" 
      direction="vertical" 
      :y="y" 
      @change="onChange"
      @touchend="onTouchEnd"
    >
      <!-- 窗口内容 -->
      <div class="content">可滑动内容区域</div>
    </movable-view>
  </movable-area>
</template>

<script>
export default {
  data() {
    return {
      y: 0,
      maxY: 300 // 最大滑动距离
    }
  },
  methods: {
    onChange(e) {
      this.y = e.detail.y
    },
    onTouchEnd() {
      if (this.y > this.maxY / 2) {
        this.y = this.maxY // 滑动到底部
      } else {
        this.y = 0 // 回到顶部
      }
    }
  }
}
</script>

<style>
.area {
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.5);
}
.view {
  width: 100%;
  height: 300px;
  background: #fff;
  border-radius: 20px 20px 0 0;
}
</style>

使用CSS动画实现

通过动态绑定class控制transform属性实现平滑滑动：

<template>
  <div 
    class="slide-panel" 
    :class="{ 'show': isShow }"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <div class="handle-bar"></div>
    <div class="panel-content">内容区域</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      startY: 0,
      currentY: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startY = e.touches[0].clientY
    },
    handleTouchMove(e) {
      this.currentY = e.touches[0].clientY - this.startY
    },
    handleTouchEnd() {
      if (this.currentY > 50) {
        this.isShow = false
      } else if (this.currentY < -50) {
        this.isShow = true
      }
    }
  }
}
</script>

<style>
.slide-panel {
  position: fixed;
  bottom: -80%;
  left: 0;
  width: 100%;
  height: 80%;
  background: #fff;
  transition: transform 0.3s ease;
  border-radius: 20px 20px 0 0;
}
.slide-panel.show {
  transform: translateY(-100%);
}
.handle-bar {
  width: 40px;
  height: 4px;
  background: #ccc;
  margin: 10px auto;
  border-radius: 2px;
}
</style>