小程序实现列表删除功能


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 相关文章推荐
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
浅谈JS的原型和原型链
Jun 04 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
第四章 php数学运算
2011/12/30 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
js实现随机抽奖
2020/03/19 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python中split方法用法分析
2015/04/17 Python
Python2.x与Python3.x的区别
2016/01/14 Python
python实现二分查找算法
2017/09/21 Python
python取代netcat过程分析
2018/02/10 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
美术国培研修感言
2014/02/12 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
经营场所证明范本
2015/06/19 职场文书
运动会800米赞词
2015/07/22 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
详解TypeScript的基础类型
2022/02/18 Javascript