Introduction à la méthode de mise en œuvre de la surveillance des événements tactiles d'image par glisser-déposer dans l'applet WeChat-Développement de mini-programmes-php.cn

Maison

Applet WeChat

Introduction à la méthode de mise en œuvre de la surveillance des événements tactiles d'image par glisser-déposer dans l'applet WeChat

Sep 12, 2017 am 10:02 AM

image 小程序监听

Cet article présente principalement des informations pertinentes sur des exemples d'applets WeChat implémentant la surveillance des événements tactiles par glisser-déposer. Voici un exemple simple de toucher et de surveillance d'images. Les amis dans le besoin peuvent s'y référer

. Exemple d'applet WeChat implémentant la surveillance des événements tactiles par glisser-déposer

Vous devez faire flotter un bouton sur la vue défilante

Rendus de réalisation :

Android aura également des opérations similaires au déplacement des contrôles. L'idée est similaire. Obtenez les variables X Y du déplacement et définissez les coordonnées du contrôle

1.index.wxml

&lt;image class=&quot;image-style&quot; src=&quot;../../images/gundong.png&quot; bindtap=&quot;ballClickEvent&quot; style=&quot;bottom:{{ballBottom}}px;right:{{ballRight}}px;&quot; bindtouchmove=&quot;ballMoveEvent&quot;&gt;  
&lt;/image&gt;

Copier après la connexion

Définissez simplement une image et ajoutez une écoute d'événement tactile en fonction de l'écoute d'événement. événement tactile Obtenez le déplacement X Y et réglez-le sur la position de l'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(&#39;我被拖动了....&#39;) 
  var touchs = e.touches[0]; 
  var pageX = touchs.pageX; 
  var pageY = touchs.pageY; 
  console.log(&#39;pageX: &#39; + pageX) 
  console.log(&#39;pageY: &#39; + pageY) 

//防止坐标越界,view宽高的一般 
  if (pageX &lt; 30) return; 
  if (pageX &gt; this.data.screenWidth - 30) return; 
  if (this.data.screenHeight - pageY &lt;= 30) return; 
  if (pageY &lt;= 30) return; 

//这里用right和bottom.所以需要将pageX pageY转换 
  var x = this.data.screenWidth - pageX - 30; 
  var y = this.data.screenHeight - pageY - 30; 
  console.log(&#39;x: &#39; + x) 
  console.log(&#39;y: &#39; + y) 
  this.setData({ 
   ballBottom: y, 
   ballRight: x 
  }); 
 }, 

//点击事件 
 ballClickEvent: function () { 
  console.log(&#39;点击了....&#39;) 
 } 
})

Copier après la connexion

3.index.wxss

Ici, vous devez définir z-index

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn