微信小程序: 数组删除操作splice()的坑

最新推荐文章于 2023-02-17 13:14:36 发布

樱岛の鲸

最新推荐文章于 2023-02-17 13:14:36 发布

阅读量8.4k

点赞数 14

分类专栏：微信小程序文章标签：小程序 js

本文链接：https://blog.csdn.net/Bat_Reality/article/details/104721839

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

Page({
  data: {
    godness: [{
      name: "杨超越"
    }, {
      name: "张天爱"
    }, {
      name: "徐璐"
    }, {
      name: "孙珍妮"
    }]
  },

  onLoad: function (options) {

  },

  deleteBtn: function(event) {
    let index = event.currentTarget.dataset.index
    this.setData({
      godness: this.data.godness.splice(index, 1)
    })
  }
})

<view style="display: flex; flex: row" wx:for="{{godness}}" wx:key="this">
  <view style="display: flex; align-items: center; justify-content: center; margin: 0 200rpx 50rpx 200rpx; border-bottom: 1px solid gray">{{item.name}}</view>
  <button data-index="{{index}}" size="mini" bindtap="deleteBtn">删除</button>
</view>

我用wx:for循环显示了数组中的各个元素, 现在想要删去第三个, 于是在网上寻找删除指定下标元素的方法, 找到了array.splice()方法, 但我有遇到了点击删除后, 显示是删除的元素, 于是就想到是否是splice的用法出现错误, 果然, 下面是splice的用法:
array.splice(index, 1): 是从index开始删除1个元素 , 并返回所删除的元素
下面是正确的删除代码:

deleteBtn: function(event) {
    let index = event.currentTarget.dataset.index
    this.data.godness.splice(index, 1)
    this.setData({
      godness: this.data.godness
    })
  }