위 챗 애플 릿 이 이미지 터치 이벤트 감청 을 끌 어 당 기 는 인 스 턴 스 를 실현 합 니 다.

위 챗 애플 릿 이 이미지 터치 이벤트 감청 을 끌 어 당 기 는 인 스 턴 스 를 실현 합 니 다.
scroll-view 위 에 떠 있 는 button 을 만들어 야 합 니 다.해 보 았 습 니 다.
구현 효과 도:

Android 에 도 모 바 일 컨트롤 과 유사 한 동작 이 있 습 니 다.생각 이 많 지 않 습 니 다.변위 하 는 X Y 변 수 를 가 져 와 컨트롤 에 좌 표를 설정 합 니 다.
1.index.wxml

<image class="image-style" src="../../images/gundong.png" bindtap="ballClickEvent" style="bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent">  
</image> 

간단하게 그림 을 설정 하고 터치 이벤트 감청 을 추가 합 니 다.이벤트 감청 을 클릭 합 니 다.터치 이벤트 에 따라 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   
  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; 
} 

궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주시 거나 본 사이트 의 커 뮤 니 티 에 가서 토론 을 하 세 요.본 사이트 의 작은 프로그램 에 관 한 글 이 아직 많 습 니 다.검색 하고 찾 아 보 세 요.읽 어 주 셔 서 감사합니다. 도움 이 되 었 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!