微信小程序开发之拖拽 image 触摸事件监听_微信小程序判断图片组件被点击

作者：AllinToyou | 2024-04-26 07:43:11

踩

微信小程序判断图片组件被点击

需要做个浮在scroll-view之上的button.尝试了一下.

上GIF:

1.index.wxml

简单的设置一张图片,添加触摸事件监听.点击事件监听.根据触摸事件获取X Y位移,设置为image的位置

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

2.index.js

   data: { 
 
   ballBottom: 
  80,/**初始位置*/ 
 
   ballRight: 
  220, 
  /**初始位置*/ 
 
   screenHeight: 
  0, 
 
   screenWidth: 
  0, 
 
   }, 
 
    /** 
   
    * 生命周期函数--监听页面加载 
   
    */ 
   
     onLoad: 
    function (options) { 
   
    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; 
 
   }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/489795