微信小程序-两次点击不同图片交换图片位置
wxml
<view >
<image wx:for="{{img}}" wx:key='item' src='{{item}}' catchtap='changes' data-index='{{index}}'></image>
</view>
js
Page({
/**
* 页面的初始数据
*/
data: {
img: ['../../images/heart1.png', '../../images/heart2.png', '', '../../images/avatar1.png', '../../images/avatar2.png', '../../images/avatar3.png'],
playNum:null
},
changes(e){
//如果 play 等于null 第一次操作数组 否则 第二次
if(this.data.playNum==null){
this.setData({ one: e.currentTarget.dataset.index })
let that = this
wx.showActionSheet({
itemList: ['操作', '迁至'],
itemColor: '#007aff',
success(res) {
if (res.tapIndex==1){
that.setData({ playNum: res.tapIndex })
}
}
})
}else{
//第二次点击 交换
this.setData({ two: e.currentTarget.dataset.index })
if (this.data.playNum == 1) {
let arr = this.data.img
let x = this.data.one, y = this.data.two
if (arr[y] == '') {
arr.splice(x, 1, ...arr.splice(y, 1, arr[x]))
// 交换后更新数组
this.setData({
img: arr,
playNum:null,
one:null,
two:null
})
} else {
wx.showToast({
title: '已有',
icon: 'none'
})
}
}
}
}
})