小程序列表快速删除技巧

在小程序中如果数据库记录以列表的形式展示出来，然后选中一个执行删除，那么需要经功两个步骤：

• 1、数据库记录加载到内存中的LIST数组中
• 2、选中要删除的记录时，记录下index值和key值
• 3、根据key删除数据库记录
• 4、根据index删除list中的元素
• 5、刷新页面（setdata)

WXML:

<!--列表-->
 <block wx:for="{{listArray}}" wx:key="_id">
   <van-cell   title="{{item.checkitem}}"   value="{{item.desc}}"
     bindlongpress="onItemLongPress" data-id="{{item._id}}" data-index="{{index}}" />
 </block>
 <!--通过data-id与data-index传递参数-->     

JS:

/*列表项长按选择操作*/
data: {
  modifyid: "",  //要删除的_id
    modifyindex: -1,  //要删除的元素在listarray中的位置 
      showMenu: false, //显示菜单
   },
//长按弹出菜单，记录删除元素信息
onItemLongPress(e) {
  const { index, id } = e.currentTarget.dataset
  this.setData({
    modifyid: id,  //要删除的_id
    modifyindex: index,  //要删除的元素在listarray中的位置 
    showMenu: true, //显示删除菜单
  })
},
//执行删除
del(){
  collection.doc(this.data.modifyid).remove().then(res => {
    this.data.listArray.splice(this.data.modifyindex, 1)
    this.setData({
		listArray: this.data.listArray，
		modifyid: "",  
		modifyindex: -1,  
		showMenu: false,       
    })    
  }).catch(res => {})
}