During the development of the applet, I came across a requirement, which is a picture. When I click it, I view the big picture. When I press and hold for a long time, the mode of deleting the picture appears. After writing for a long time, I finally completed the requirement, and I will paste it below. The code, I hope the front-end peers can use it, and directly upload the code:
was not;
Page({
/**
* Initial data of the page
*/
data: {
touchTime:0,
moveIs: false,
intTime: 0,
name:""
},
onLoad: function (options) {
this.setData({
name: options.name
})
},
photograph:function(){
wx.chooseImage({
count: 9, // default 9
sizeType: ['original', 'compressed'], // You can specify the original image or the compressed image, both by default
sourceType: ['album', 'camera'], // You can specify whether the source is an album or a camera, both by default
success: function (res) {
// Returns a list of local file paths for the selected photo, tempFilePath can be used as the src attribute of the img tag to display the image
var tempFilePaths = res.tempFilePaths;
console.log(tempFilePaths)
}
})
},
imgtouchstart:function(e){
console.log(e)
//Get the position of the currently clicked image
var me=this;
this.setData({
moveIs:true
})
var time = this.data.intTime;
int=setInterval(function(){
time++; //time increment
me.setData({
intTime:time //time assignment
})
},100)
// console.log(e.currentTarget.dataset.code)
setTimeout(function(){
var newtouchTime = me.data.touchTime,
moveIs = me.data.moveIs;
if (newtouchTime == 0 && moveIs==true){
// delete the popup
wx.showModal({ // Needless to say, I can understand it if I have done a small program
title: 'Tips',
content: 'Are you sure you want to delete this image? ',
success: function (res) {
if (res.confirm) {
console.log('User clicks OK')
} else if (res.cancel) {
console.log('User clicks cancel')
}
}
})
}
},1000)
},
imgtouchmove:function(e){
var newtouchTime = this.data.touchTime+1; //Determine whether the finger has moved or not, if there is no movement, it is a long press event
this.setData({
touchTime: newtouchTime //return value
})
},
imgtouchend:function(e){
clearInterval(int); //pause
var time = this.data.intTime, //get time
code = e.currentTarget.dataset.code;
if (time<=1&& touchTime<=1){ //If the time is short and it has not been moved, it is a long press event to jump to the page of the large image
wx.navigateTo({
url: '../lookImg/lookImg?code=' + code //Jump to the page and judge which picture you are uploading according to the code value
})
}
this.setData({ //After execution, restore all
touchTime: 0,
moveIs:false,
intTime: 0
})
}
})
If you have time, you can pay attention to my blog, and if you have time, I will update some problems encountered in my work. If you have good opinions, I hope you will communicate more. Technology is progressing in discussions: http://www.cnblogs.com/laiqiangjin