小程序实现列表删除功能


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错误的解决方案
Aug 07 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
javascript学习小结之prototype
Dec 03 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
JavaScript实现滑块验证解锁
Jan 07 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
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
用Socket发送电子邮件
2006/10/09 PHP
怎么使 Mysql 数据同步
2006/10/09 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
express.js中间件说明详解
2019/03/19 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
python基于socket实现网络广播的方法
2015/04/29 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Python Django 命名空间模式的实现
2019/08/09 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
网络工程专业毕业生推荐信
2013/10/28 职场文书
物流专业大学生求职信范文
2013/10/28 职场文书
企业年会主持词
2014/03/27 职场文书
关于安全的标语
2014/06/10 职场文书
公司周年庆活动方案
2014/08/25 职场文书
2014离婚协议书范文
2014/09/10 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
2015大学生求职信范文
2015/03/20 职场文书
初中历史教学反思
2016/02/19 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
Golang 实现WebSockets
2022/04/24 Golang
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android