小程序的長按事件和點擊事件


  開發小程序的時間,碰見一個需求,就是一個圖片,點擊的時候,查看大圖,長按的時候,出刪除圖片的模態,寫了半天時間,終於是把需求完成了,下面就貼上代碼,希望前端的同行小伙伴能用到,直接上代碼:

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

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM