@longpress长按事件
<template>
<view class="img-parent">
<block v-for="(item,index) in arrList" v-key="index">
<view @longpress="deleteImage" :data-index="index">
<image mode="aspectFill" class="img" :src="item.src" />
</view>
</block>
</view>
</template>
<script>
export default {
data() {
return {
arrList: [{
id: 1,
src: "../../static/loc/Details.png"
}, {
id: 2,
src: "../../static/loc/DrivingScore.png"
}, {
id: 3,
src: "../../static/loc/Fence.png"
}, {
id: 4,
src: "../../static/loc/Flow.png"
}, {
id: 5,
src: "../../static/loc/ItinerarySummary.png"
}, {
id: 6,
src: "../../static/loc/loc.png"
}, {
id: 7,
src: "../../static/loc/Navigation.png"
}, {
id: 8,
src: "../../static/loc/Testing.png"
}, {
id: 9,
src: "../../static/loc/Track.png"
}, {
id: 10,
src: "../../static/loc/TripShare.png"
}]
}
},
methods: {
deleteImage: function(e) {
var that = this;
var index = e.currentTarget.dataset.index; //获取当前长按图片下标
wx.showModal({
title: '提示',
content: '确定要删除此图片吗?',
success: function(res) {
if (res.confirm) {
console.log('点击确定了');
that.arrList.splice(index, 1);
} else if (res.cancel) {
console.log('点击取消了');
return false;
}
}
})
}
}
}
</script>
<style>
.img-parent{
display: flex;
flex-wrap: wrap;
}
.img {
width: 80upx;
height: 80upx;
margin-left: 30upx;
}
</style>