当前位置：首页 > uni-app

uniapp删除

2026-03-04 17:41:47uni-app

uniapp 删除操作的方法

在uniapp中实现删除功能通常涉及前端界面交互和后端数据处理，以下是几种常见场景的实现方法：

删除列表项 通过数组splice方法移除数据项并更新视图：

deleteItem(index) {
  this.list.splice(index, 1)
  uni.showToast({
    title: '删除成功',
    icon: 'none'
  })
}

删除本地存储数据 使用uni.removeStorage清除指定key的缓存：

uni.removeStorage({
  key: 'userInfo',
  success() {
    console.log('数据删除成功')
  }
})

删除文件 调用uni.removeSavedFile删除本地文件：

uni.getSavedFileList({
  success(res) {
    const filePath = res.fileList[0].filePath
    uni.removeSavedFile({
      filePath,
      complete() {
        uni.showToast({ title: '文件已删除' })
      }
    })
  }
})

数据库删除操作 配合云开发或接口请求实现：

uniCloud.database().collection('articles')
  .doc('记录ID')
  .remove()
  .then(res => {
    console.log('数据库记录删除成功')
  })

注意事项

重要数据删除前应添加确认提示框
网络请求需处理错误回调
实际项目需结合后端接口进行权限验证
列表删除可搭配uni-swipe-action组件实现左滑删除效果

删除功能扩展实现

带确认的删除对话框

confirmDelete(id) {
  uni.showModal({
    title: '确认删除',
    content: '删除后不可恢复',
    success(res) {
      if (res.confirm) {
        // 执行删除逻辑
      }
    }
  })
}

批量删除实现

batchDelete() {
  const ids = this.selectedItems.map(item => item.id)
  uni.request({
    url: '/api/batchDelete',
    method: 'POST',
    data: { ids },
    success() {
      uni.showToast({ title: '批量删除成功' })
    }
  })
}

删除动画效果 在vue文件中添加过渡效果：

uniapp删除

<view v-for="(item,index) in list" :key="item.id" 
      class="list-item" 
      :animation="item.animationData">
  <button @click="startDelete(index)">删除</button>
</view>

startDelete(index) {
  const animation = uni.createAnimation({
    duration: 300,
    timingFunction: 'ease'
  })
  animation.opacity(0).left('100%').step()
  this.list[index].animationData = animation.export()
  setTimeout(() => {
    this.list.splice(index, 1)
  }, 300)
}

标签: uniapp