uniapp左滑div变短 编辑按钮

在Uniapp中实现左滑div变短的效果，我们可以按照以下步骤进行：

1. 首先，我们需要创建一个带有编辑按钮的div组件，例如：

<template>
  <div class="container">
    <div class="content">
      <!-- 内容 -->
    </div>
    <div class="handle">
      <button class="edit-btn" @click="handleEdit">编辑</button>
    </div>
  </div>
</template>

2. 在样式中，我们为.container设置相对定位和最小高度，为.content设置绝对定位和左移动的动画效果，为.handle设置绝对定位和右移动的动画效果，例如：

<style scoped>
.container {
  position: relative;
  min-height: 100px;
  overflow: hidden;
}

.content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.handle {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 100%;
  background-color: #f0f0f0;
  transition: transform 0.3s ease;
}

.edit-btn {
  margin: 10px;
  padding: 5px 10px;
  background-color: #ccc;
}
</style>

3. 在组件的data中添加一个变量isEditing，用于控制点击编辑按钮后的变化，例如：

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

4. 在.content和.handle中，根据isEditing的值设置相应的变化，例如：

.content {
  transform: translateX(0);
}

.handle {
  transform: translateX(100%);
}

.container.editing .content {
  transform: translateX(-100px);
}

.container.editing .handle {
  transform: translateX(0);
}

5. 在点击编辑按钮的方法中，通过给.container添加一个editing类名来触发相应的样式变化，例如：

methods: {
  handleEdit() {
    this.isEditing = !this.isEditing;
    if (this.isEditing) {
      this.$el.classList.add("editing");
    } else {
      this.$el.classList.remove("editing");
    }
  }
}

这样，当点击编辑按钮时，通过改变isEditing的值并添加或移除editing类名，实现了左滑div变短的效果。