当前位置：首页 > uni-app

uniapp上滑窗口

2026-02-06 13:06:00uni-app

在UniApp中实现上滑窗口（类似底部抽屉或半屏弹窗）可以通过多种方式实现，以下是常见的几种方法：

uniapp上滑窗口

使用`uni-popup`组件

UniApp官方提供的uni-popup组件支持多种弹出层形式，包括从底部滑动的窗口。需要先安装或引入该组件。

uniapp上滑窗口

<template>
  <view>
    <button @click="showPopup">打开上滑窗口</button>
    <uni-popup ref="popup" type="bottom">
      <view class="popup-content">
        <!-- 自定义内容 -->
        <text>这是从底部弹出的内容</text>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  methods: {
    showPopup() {
      this.$refs.popup.open();
    }
  }
}
</script>

<style>
.popup-content {
  padding: 20px;
  background: #fff;
  border-radius: 10px 10px 0 0;
}
</style>

自定义动画实现

通过CSS动画和动态样式控制实现滑动效果，适合需要高度定制的场景。

<template>
  <view>
    <button @click="toggleDrawer">切换抽屉</button>
    <view class="drawer" :style="{transform: `translateY(${isOpen ? '0%' : '100%'})`}">
      <view class="handle" @click="toggleDrawer"></view>
      <!-- 自定义内容 -->
    </view>
    <view class="mask" v-if="isOpen" @click="toggleDrawer"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggleDrawer() {
      this.isOpen = !this.isOpen;
    }
  }
}
</script>

<style>
.drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60vh;
  background: #fff;
  transition: transform 0.3s ease;
  z-index: 100;
}

.handle {
  height: 30px;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}
</style>

使用第三方组件库

如uView UI等第三方库提供了更丰富的上滑窗口组件，支持手势操作和复杂交互。

<template>
  <view>
    <u-action-sheet :list="list" v-model="show"></u-action-sheet>
    <button @click="show = true">打开ActionSheet</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      list: [
        { text: '选项1' },
        { text: '选项2' }
      ]
    }
  }
}
</script>