小程序实现列表删除功能


Posted in Javascript onOctober 30, 2018

本文实例为大家分享了小程序列表删除功能的具体代码,供大家参考,具体内容如下

  • 地址簿删除,先获取当前地址部分的id值,根据id值来删除对应的地址部分。
  • 获取全部的地址信息,定义一个空的数组newallData,用来放置新的地址信息。
  • 在全部地址信息中删除选中的id的地址信息,生成新的地址信息放入定义的空数组中。
  • 现在newallData就是删除选中地址信息以后剩下的地址信息,在newallData中的信息渲染在页面。

wml文件:

<!-- 删除 -->
<view class="delete" bindtap="deleteaddress" data-id="{{ item.id }}">删除</view>

js文件:

deleteaddress(e){
  let that = this;
  console.log(e);
  let deldeid = e.currentTarget.dataset.id;
  let allDatas = that.data.allData;
  let newallData = [];
  for (var i in allDatas) {
   var item = allDatas[i];
   if (item.id != deldeid) {
    newallData.push(item);
   }
  } 
  console.log(newallData)
  wx.showModal({
   'content': '确认删除该地址信息吗?',
   'cancelColor': '#0076FF',
   'confirmColor': '#0076FF',
   success: function (res) {
    if (res.confirm) {
     console.log('用户点击确定')
     let url = getApp().Api_url + '/receiver/delete';
     requestd._post(url, { receiverId: e.currentTarget.dataset.id }, function (res2) {
      console.log(res2);
      if( res2.data.status == 1 ){
       that.setData({
        allData: newallData
       });
      }else{
       wx.showModal({
        'showCancel': false,
        'content': res2.data.message,
        'confirmColor': '#0076FF'
       })
      }
     }, function (res2) { })
    } else if (res.cancel) {
     console.log('用户点击取消')
    }
   }
  })

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery下实现overlay遮罩层代码
Aug 25 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
jquery移动节点实例
Jan 14 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
require.js 加载过程与使用方法介绍
Oct 30 #Javascript
小程序实现左滑删除功能
Oct 30 #Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 #Javascript
小程序云开发部署攻略(图文教程)
Oct 30 #Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 #Javascript
微信小程序实现单选功能
Oct 30 #Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 #Javascript
You might like
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Python中super函数用法实例分析
2019/03/18 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
python交易记录整合交易类详解
2019/07/03 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
年度考核自我鉴定
2013/11/09 职场文书
跳槽求职信范文
2014/05/26 职场文书
植树造林的宣传标语
2014/06/23 职场文书
个人总结怎么写
2015/02/26 职场文书
超市采购员岗位职责
2015/04/07 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis