当前位置：首页 > uni-app

uniapp左滑窗口

2026-03-05 12:31:45uni-app

左滑窗口实现方法

在UniApp中实现左滑窗口效果，通常可以通过以下两种方式实现：

方式一：使用<swipe-action>组件

UniApp官方提供了<swipe-action>组件，专门用于实现滑动操作：

<template>
  <view>
    <swipe-action>
      <swipe-action-item :options="options" @click="handleClick">
        <view class="content">滑动我试试</view>
      </swipe-action-item>
    </swipe-action>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        },
        {
          text: '收藏',
          style: {
            backgroundColor: '#007aff'
          }
        }
      ]
    }
  },
  methods: {
    handleClick(e) {
      console.log('点击了按钮', e.index)
    }
  }
}
</script>

方式二：自定义滑动效果

通过touch事件和CSS动画实现自定义滑动：

uniapp左滑窗口

<template>
  <view class="swipe-container" 
        @touchstart="touchStart" 
        @touchmove="touchMove" 
        @touchend="touchEnd">
    <view class="content" :style="{transform: `translateX(${translateX}px)`}">
      可滑动内容
    </view>
    <view class="actions">
      <view class="action-btn" @click="handleAction(1)">按钮1</view>
      <view class="action-btn" @click="handleAction(2)">按钮2</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      translateX: 0,
      maxTranslate: -120
    }
  },
  methods: {
    touchStart(e) {
      this.startX = e.touches[0].clientX
    },
    touchMove(e) {
      const moveX = e.touches[0].clientX - this.startX
      if (moveX < 0) {
        this.translateX = Math.max(moveX, this.maxTranslate)
      }
    },
    touchEnd() {
      if (this.translateX < this.maxTranslate / 2) {
        this.translateX = this.maxTranslate
      } else {
        this.translateX = 0
      }
    },
    handleAction(type) {
      console.log('执行操作', type)
      this.translateX = 0
    }
  }
}
</script>

<style>
.swipe-container {
  position: relative;
  overflow: hidden;
}
.content {
  width: 100%;
  height: 100px;
  background: #fff;
  transition: transform 0.3s;
  z-index: 2;
}
.actions {
  position: absolute;
  right: 0;
  top: 0;
  height: 100px;
  display: flex;
}
.action-btn {
  width: 60px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #007aff;
  color: white;
}
</style>