规则：
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
