開發小程序的時間,碰見一個需求,就是一個圖片,點擊的時候,查看大圖,長按的時候,出刪除圖片的模態,寫了半天時間,終於是把需求完成了,下面就貼上代碼,希望前端的同行小伙伴能用到,直接上代碼:
var int;
Page({
/**
* 頁面的初始數據
*/
data: {
touchTime:0,
moveIs: false,
intTime:0,
name:""
},
onLoad: function (options) {
this.setData({
name: options.name
})
},
photograph:function(){
wx.chooseImage({
count: 9, // 默認9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標簽的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths;
console.log(tempFilePaths)
}
})
},
imgtouchstart:function(e){
console.log(e)
//獲取當前點擊的這個圖片位置
var me=this;
this.setData({
moveIs:true
})
var time = this.data.intTime;
int=setInterval(function(){
time++; //時間自增
me.setData({
intTime:time //時間賦值
})
},100)
// console.log(e.currentTarget.dataset.code)
setTimeout(function(){
var newtouchTime = me.data.touchTime,
moveIs = me.data.moveIs;
if (newtouchTime == 0 && moveIs==true){
// 刪除彈窗
wx.showModal({ //這個不用多說,做過小程序都看得懂
title: '提示',
content: '確認刪除該圖片嗎?',
success: function (res) {
if (res.confirm) {
console.log('用戶點擊確定')
} else if (res.cancel) {
console.log('用戶點擊取消')
}
}
})
}
},1000)
},
imgtouchmove:function(e){
var newtouchTime = this.data.touchTime+1; //判斷手指有沒有移動 如果沒有移動就是長按事件
this.setData({
touchTime: newtouchTime //返回值
})
},
imgtouchend:function(e){
clearInterval(int); //暫停
var time = this.data.intTime, //獲取時間
code = e.currentTarget.dataset.code;
if (time<=1&& touchTime<=1){ //如果時間短並且沒有移動過 那就是長按事件 跳轉大圖的頁面查看
wx.navigateTo({
url: '../lookImg/lookImg?code=' + code //跳轉頁面,根據code值判斷你傳的是哪一張圖片
})
}
this.setData({ //執行完畢,全部還原
touchTime: 0,
moveIs:false,
intTime:0
})
}
})
有時間可以關注一下我的博客,有時間就會更新一些工作中碰見的問題,有好的意見也希望大家多交流,技術在於討論中進步:http://www.cnblogs.com/laiqiangjin