小程序实现列表删除功能

2024-07-30 15:55:02

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

地址簿删除，先获取当前地址部分的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('用户点击取消')
    }
   }
  })

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序实现列表项滑动显示删除按钮的功能

微信小程序实现列表项滑动显示删除按钮的功能微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.
微信小程序项目总结之点赞删除列表分享功能

小程序点赞功能思路:在后台没有给你接口自己模拟数据 data:{ likes:{ iszan:false, num:0 } } 1.遍历评论列表判断点击的id 2.如果id相同判断是否点赞过如果为true -1 如果为false +1 3.更新数据 bindlike:function(e){ var newData = this.data.release.map(function(item){ if (item.id == e.currentTarget.dataset.id){ con
小程序实现列表删除功能

本文实例为大家分享了小程序列表删除功能的具体代码,供大家参考,具体内容如下地址簿删除,先获取当前地址部分的id值,根据id值来删除对应的地址部分. 获取全部的地址信息,定义一个空的数组newallData,用来放置新的地址信息. 在全部地址信息中删除选中的id的地址信息,生成新的地址信息放入定义的空数组中. 现在newallData就是删除选中地址信息以后剩下的地址信息,在newallData中的信息渲染在页面. wml文件:  <view class="
小程序实现侧滑删除功能

本文实例为大家分享了小程序实现侧滑删除的具体代码,供大家参考,具体内容如下 1.页面布局 <view class='dialogue-box'> <scroll-view scroll-y="true" style="height:{{winHeight-50}}px"> <view class='top-list'> <view class='standard_text1'&
小程序实现列表倒计时功能

本文实例为大家分享了小程序实现列表倒计时的具体代码,供大家参考,具体内容如下效果 HTML代码 <view class="hbMpBox" wx:for="{{mpThing}}" data-goodsId="{{item.goods_id}}" data-id="{{index}}" bindtap="navSeceGroup"> <view class="hbMpBox_l
小程序实现列表点赞功能

最近在开发一个小程序,想添加一个点赞功能,那到底怎么实现呢?因为要和后台服务器同步数据,所以这个我想了好几天应该怎么实现点赞和取消点赞的逻辑,经过两天的实践调试,最终实现了. 思路如下: 1.找到对应文章列表的id (我用的是 wx:for 列表渲染加 template 模板来实现文章列表的,所以如果没找到对应的 id ,点赞时可能会出现点击一个列表,别的列表也会发生变化的事件) 2.在前端利用 wx.setStorageSync 保存对应的列表点赞的 id 的缓存后面通过缓存判断该文章是否
微信小程序左滑删除功能开发案例详解

直接进入正题,我们需要做的就是通过手指滑动列表项后,右侧出现删除: 比如说像这样: 向左边滑动后出现如下的效果: 开始撸代码- 假设我们有N个列表项来自一个数组list,先确定基本的结构 <view class="list" wx:for="{{list}}" wx:key> <view class="item"> <view class="wrap">{{item}}</view&g
微信小程序实现列表分页功能

微信小程序列表分页功能(未使用API),供大家参考,具体内容如下概述主要实现功能: 1.列表展示2.上下页点击效果图: 知识点:wx:for.bindtap.生命周期函数–监听页面加载..filter.取余( % )取整(parseInt(x/y) )函数 js data: { frontPage: false,//上一页存在true,不存在false nextPage: false,//下一页存在true,不存在false pages: 0,//所有页
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图从左边的列表页调到右边的详情页二.页面之间的跳转首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi
微信小程序文章列表功能完整实例

本文实例讲述了微信小程序文章列表功能.分享给大家供大家参考,具体如下: 没有服务器接口数据的情况下玩一玩. list.wxml <view> <swiper class='swiper' indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay="true" interval="2000" easing-function="
微信小程序实现列表项左滑删除效果

本文实例为大家分享了微信小程序实现列表项左滑删除效果的具体代码,供大家参考,具体内容如下效果图片 WXML <view class="container">  <view class="address"> <view class="left"> <view class="icon"> <image src="../../i

小程序实现列表删除功能

相关推荐

随机推荐