小程序实现箭头上下切换删除

规则：
1 点击向上时，view向上移动；点击向下时，view向下移动；点击删除时，view消失。
2 第一个view没有向上标记，最后一个view没有向下标记
3 页面效果如下

image

思路：

通过数组循环创建view，通过数组的改变实现view的改变
上下切换：如果是1上移，就代表数组的第一个元素和第二个元素交换
删除，通过splice删除相应数组的元素
通过view中绑定data-i得到当前点击的是哪个元素

//页面使用grid布局，因为还不是很熟，所以没有逆向展示button，后面会在更新
<view  wx:for='{{list}}' style="display:flex;justify-content:space-between;padding:10rpx 20rpx;height:150rpx;">
  <view>{{index}}.{{item}}</view>
  <view data-i='{{index}}' style="width:200rpx;display:grid;grid-template-columns:repeat(3,33.3%);">
    <view data-i='{{index}}' bindtap="up" wx:if="{{index}}">👆</view>
    <view data-i='{{index}}' bindtap="down" wx:if="{{index<list.length-1}}">👇</view>
    <view data-i='{{index}}' bindtap="del">×</view>
  </view>
</view>

// 引入外部函数
import{
  $attr
}from '../../utils/fun.js'
Page({
  up(e){
  //交换数组元素前后位置
    let temp = this.data.list[$attr(e, 'i') - 1]
    this.data.list[$attr(e, 'i') - 1] = this.data.list[$attr(e, 'i')]
    this.data.list[$attr(e, 'i')] = temp
    this.setData({
      list: this.data.list
    })
  },
  down(e) {
    let temp = this.data.list[$attr(e, 'i') + 1]
    this.data.list[$attr(e, 'i') + 1] = this.data.list[$attr(e, 'i')]
    this.data.list[$attr(e, 'i')] = temp
    this.setData({
      list: this.data.list
    })
  },
  //获得是数组的第几个下标，删除数组的相应下标
  del(e){
    this.data.list.splice($attr(e,'i'),1)
    this.setData({
      list: this.data.list
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    list:['AAAAAAAA',
    'BBBBBBB',
    'CCCCCCCCCCC','DDDDDDDDD','EEEEEEEEEE']
  },

})

//此封装是为了得到当前view的data-'id'的值
export function $attr(e, id) {
  return e.currentTarget.dataset[id]
}

交换数组中两个元素的位置还有一种方法是splice，来个小例子，思路是：

将前面一位用splice删除，增加后面一位，返回的是删除的值数组，注意将数组展开，再将删除的值取出，用splice将当前位置的元素取出，增加之前splice返回的值
第一次要删除的是前面的值，增加的是后面的值，第二次删除的是当前的值，增加的是前面的值（splice返回的值）

    let a = [1, 2, 3, 4]
    let i = 3
    a.splice(i, 1, ...a.splice(i - 1, 1, a[i]))

所以上面的小程序交换数组可以写成：

 up(e){
    let list = this.data.list
    let index = $attr(e, 'i')
    list.splice(index,1,...list.splice((index-1),1,list[index]))
    this.setData({
      list
    })
  },

哦啦(＾－＾)V

小程序实现箭头上下切换删除

推荐阅读更多精彩内容