小程序的删除怎么做无刷新的

最新推荐文章于 2024-06-08 01:00:00 发布

原创最新推荐文章于 2024-06-08 01:00:00 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

37 篇文章

订阅专栏

本文介绍在小程序中如何实现数据的动态删除，通过缓存数组和setData()方法更新视图，避免页面刷新，提升用户体验。

今天在做小程序的时候突然发现，咦！这个删除怎么做嘞！怎么让他不刷新数据移除呢！

在做pc版的时候，就是直接向后台发起ajax请求，然后从数据库直接将数据删除掉，在返回给前台一个状态码！然后直接this他的父级，直接移除即可

但是在小程序是没有dom元素的，所以我们是需要换一种思维方式去解决这个问题

前台的所有数据都是从数据库读取出来，然后进行渲染

小程序有个强大的函数那就是this.setData();

3.小程序获取到数据后，大多数情况下是一个数组。

4.将这个数组保存到缓存里边

5.使用缓存来渲染数据

6.当点击删除的时候，直接将数组的下标和数据的id返回到js，数组下标用来删除缓存缓存里边的数据，数据id用来直接删除数据库数据

7.js有相应删除数组方法

8.将删除后的数据在一次存放到缓存里边

9.使用this.setData({});把这个需要渲染的值在进行设置即可

// 删除团队成员
    onTapDelMember: function (e) {
      var that = this;
      // 获取团队成员
      var memberList = wx.getStorageSync('memberList');
      console.log(memberList)
      // 获取团队成员id
      var id = e.currentTarget.dataset.memberid;
      console.log(id)

      wx.showModal({
        title: "提示",
        content: "确定删除此项目？",
        mask: !0,
        success: function (e) {

          // 删除对应的索引
          var memberLists = memberList.splice(id, 1);
          // 存入缓存
          var kaka = wx.setStorageSync('memberList', memberList);

          var getKaka = wx.getStorageSync('memberList');

          that.setData({
            memberList: getKaka
          });
        }
      });
     
      
    },