小程序实现列表删除功能


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 相关文章推荐
深入理解javascript动态插入技术
Nov 12 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
js创建对象的方式总结
Jan 10 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
vue增加强缓存和版本号的实现方法
May 01 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
vue el-table实现自定义表头
Dec 11 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
vue3.0生命周期的示例代码
Sep 24 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
一个php作的文本留言本的例子(二)
2006/10/09 PHP
PHP初学入门
2006/11/19 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
python实现雨滴下落到地面效果
2018/06/21 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
我们的节日元宵活动方案
2014/08/23 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
商标侵权律师函
2015/05/27 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
七夕情人节问候语
2015/11/11 职场文书