小程序如何实现左滑删除

叁歲伎倆 2023-07-22 09:19 1阅读 0赞

左滑如何显示删除具体可以参考这里[https://developers.weixin.qq.com/miniprogram/dev/extended/weui/slideview.html][https_developers.weixin.qq.com_miniprogram_dev_extended_weui_slideview.html]

我的页面效果如下：

![显示左滑删除效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5NTIwMw_size_16_color_FFFFFF_t_70]

如何获取删除的对应数据呢？（我说一下我的数据是一个二维数组，所以我是通过下标然后获取到数据的id，然后再进行删除的）

要在mp-slideview的标签中加上**data-index="\{ \{index\}\}" **这样在js中就可以获取到你左滑删除的对应数据的下标，就像这样：

<mp-slideview buttons="{
       {slideButtons}}" data-index="{
       {index}}" bindbuttontap="slideButtonTap">

在utils中封装了一个删除的方法，这个方法是在网上借鉴的他人的，代码如下：

/**删除数组中的某一个对象    array:数组    obj:需删除的对象*/
    const arrRemoveObj = (array, obj) => {
      let length = array.length;
      for (let i = 0; i < length; i++) {
        if (array[i] === obj) {
          if (i === 0) {
            array.shift();
            return array;
          } else if (i === length - 1) {
            array.pop();
            return array;
          } else {
            array.splice(i, 1);
            return array;
          }
        }
      }
    }
    
    
    module.exports = {
      arrRemoveObj: arrRemoveObj
    }

封装好了之后，就在js中用require引用，如***const util = require("../../../../utils/util.js")，***要注意写对你自己的路径，

之后就是实现删除的代码了，我的删除使用了模态框wx.showModal,就是在你点击删除的时候出现提示，点击确定就进行删除

slideButtonTap(e) {
          //获取当前对应的数据的下标
          let classIndex = e.currentTarget.dataset.index
          var that = this
          wx.showModal({
            content: '确认删除吗',
            success: res => {
              if (res.confirm) {
                // console.log('用户点击确定')
                //获取到data中你的数据
                var sinfo = that.data.sinfo
                //获取到全局变量中的token
                var token = app.globalData.token;
                wx.request({
                    url: app.globalData.delete_class,
                    method: 'POST',
                    header: {
                      'content-type': 'application/x-www-form-urlencoded',
                    },
                    data: {
                      token: token,
                      classid: sinfo[classIndex].classid 
                      //获取到对应数据中的classid，传到后台，根据classid进行删除
                    },
    
                    success: res => {
                      if (res.data.error) {
                        wx.showToast({
                          title: res.data.message,
                          icon: 'none'
                        })
                        return
                      } else {
                        //用到utils中封装的删除方法
                        var idx = classIndex;
                        var sinfo = this.data.sinfo;
    
                        util.arrRemoveObj(sinfo, sinfo[idx]);
                        //更新data中sinfo的数据
                        this.setData({
                          sinfo: sinfo
                        })
                        //将数据存入到本地缓存中
                        wx.setStorageSync('sinfo', sinfo);
                        wx.showToast({
                          title: '删除成功',
                          icon: 'none',
                          duration: 2000
                        })
    
                      }
                    }
                })
              }
            }
          })
      },

后台的代码就不用写了吧，就是根据传过来的classid进行删除，不清楚如何写的话，可以去看看ThinkPHP5.0完全开发手册，里面有介绍如何对数据进行增删改查。

这样我们就可以成功的对数据进行删除了！！！

刚入门不久，如果有错误，请评论出来就行,看到之后，如果真是这样我会进行修改的

[https_developers.weixin.qq.com_miniprogram_dev_extended_weui_slideview.html]: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/slideview.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5NTIwMw_size_16_color_FFFFFF_t_70]: /images/20230528/5906ceafdcb5423eb538a17082837203.png