微信小程序 列表 设置上下移动和删除

展示：

wxml:

<view class="interest-points">
  <view wx:for="{{buildingList}}" wx:key="id" class="point-item">
    <text class="building-title">{{item.title}}</text>
    <view class="point-actions">
      <text bindtap="onUpmove" data-index="{{index}}" class="action-btn">上移</text>
      <text bindtap="onDownmove" data-index="{{index}}" class="action-btn">下移</text>
      <text bindtap="onDelete" data-index="{{index}}" class="action-btn delete-btn">删除</text>
    </view>
  </view>
</view>

js：

  onUpmove: function (e) {
    const index = e.currentTarget.dataset.index;
    if (index > 0) {
      const newList = [...this.data.buildingList];
      const temp = newList[index];
      newList[index] = newList[index - 1];
      newList[index - 1] = temp;
      this.setData({
        buildingList: newList
      });
    }
  },

  onDownmove: function (e) {
    const index = e.currentTarget.dataset.index;
    if (index < this.data.buildingList.length - 1) {
      const newList = [...this.data.buildingList];
      const temp = newList[index];
      newList[index] = newList[index + 1];
      newList[index + 1] = temp;
      this.setData({
        buildingList: newList
      });
    }
  }  ,
  onDelete: function (e) {
    const index = e.currentTarget.dataset.index;
    const newList = [...this.data.buildingList];
    newList.splice(index, 1); // 删除对应的项
    this.setData({
      buildingList: newList
    });
  },

wxss：

  /* 列表区域 */

  /* 整体容器样式 */
.interest-points {
  padding: 10px;
  background-color: #f9f9f9;
}

/* 每个列表项的样式 */
.point-item {
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 标题文字 */
.building-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* 操作按钮容器 */
.point-actions {
  display: flex;
  gap: 10px;
}

/* 每个按钮的样式 */
.action-btn {
  font-size: 14px;
  color: #007aff;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background-color 0.3s, color 0.3s;
}

/* 上下移按钮的悬停效果 */
.action-btn:hover {
  background-color: #007aff;
  color: #fff;
}

/* 删除按钮的特别样式 */
.delete-btn {
  color: #ff3b30;
  border: 1px solid #ff3b30;
}

.delete-btn:hover {
  background-color: #ff3b30;
  color: #fff;
}