微信小程序如何實現(xiàn)拖拽image觸摸事件監(jiān)聽-創(chuàng)新互聯(lián)

小編給大家分享一下微信小程序如何實現(xiàn)拖拽image觸摸事件監(jiān)聽，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為臨朐等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及臨朐網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都網(wǎng)站制作、成都做網(wǎng)站、臨朐網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實例

需要做個浮在scroll-view之上的button.嘗試了一下.

實現(xiàn)效果圖：

Android中也會有類似移動控件的操作.思路差不多.獲取到位移的X Y 的變量,給控件設置坐標.

1.index.wxml

簡單的設置一張圖片,添加觸摸事件監(jiān)聽.點擊事件監(jiān)聽.根據(jù)觸摸事件獲取X Y位移,設置為image的位置

2.index.js

//index.js 
//獲取應用實例 
var app = getApp() 
Page({ 
 data: { 
  ballBottom: 240, 
  ballRight: 120, 
  screenHeight: 0, 
  screenWidth: 0, 
 }, 
 onLoad: function () { //獲取屏幕寬高 
  var _this = this; 
  wx.getSystemInfo({ 
   success: function (res) { 
    _this.setData({ 
     screenHeight: res.windowHeight, 
     screenWidth: res.windowWidth, 
    }); 
   } 
  }); 
 }, 
 ballMoveEvent: function (e) { 
  console.log('我被拖動了....') 
  var touchs = e.touches[0]; 
  var pageX = touchs.pageX; 
  var pageY = touchs.pageY; 
  console.log('pageX: ' + pageX) 
  console.log('pageY: ' + pageY) 

//防止坐標越界,view寬高的一般 
  if (pageX < 30) return; 
  if (pageX > this.data.screenWidth - 30) return; 
  if (this.data.screenHeight - pageY <= 30) return; 
  if (pageY <= 30) return; 

//這里用right和bottom.所以需要將pageX pageY轉(zhuǎn)換 
  var x = this.data.screenWidth - pageX - 30; 
  var y = this.data.screenHeight - pageY - 30; 
  console.log('x: ' + x) 
  console.log('y: ' + y) 
  this.setData({ 
   ballBottom: y, 
   ballRight: x 
  }); 
 }, 

//點擊事件 
 ballClickEvent: function () { 
  console.log('點擊了....') 
 } 
})

3.index.wxss

這里需要設置z-index

.image-style{ 
 position: absolute; 
 bottom: 240px; 
 right: 100px; 
 width: 60px; 
 height: 60px; 
 z-index: 100; 
}

以上是“微信小程序如何實現(xiàn)拖拽image觸摸事件監(jiān)聽”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前名稱：微信小程序如何實現(xiàn)拖拽image觸摸事件監(jiān)聽-創(chuàng)新互聯(lián)
瀏覽路徑：http://m.jiaotiyi.com/article/pjsgi.html