介绍 & lt; image 类=癷mage-style", src=https://www.yisu.com/zixun/images/gundong.png " bindtap=" ballClickEvent”风格="底:{{ballBottom}} px;右:{{ballRight}} px; ballMoveEvent“bindtouchmove=>
//index.js //获取应用实例,
var app =, getApp (),
页面({,
数据:,{大敌;
ballBottom才能:240年,,,
ballRight才能:120年,,,
,,screenHeight: 0,,
,,screenWidth: 0,,
},大敌;
,onLoad: function (),{,//获取屏幕宽高,
var 才能;_this =,,,
,wx.getSystemInfo({大敌;
,,,成功: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),//防止坐标越界、查看宽高的一般,
if 才能;(pageX & lt;, 30),返回,,
if 才能;(pageX 祝辞,this.data.screenWidth 作用;30),返回,,
if 才能;(this.data.screenHeight 作用;pageY & lt;=, 30),返回,,
if 才能;(pageY & lt;=, 30),返回,,//这里用正确和底。所以需要将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;),
}大敌;
}) .image-style {,
,位置:绝对的,,
,底部:240 px,,
,右:100 px,,
,宽度:60 px;,
,高度:60 px;,
,z - index:, 100;
}
小编给大家分享一下微信小程序如何实现拖拽图片触摸事件监听,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>微信小程序实现拖拽图片触摸事件监听的实例
需要做个浮在滚动视图之上的按钮。尝试了一下。
实现效果图:
Android中也会有类似移动控件的操作。思路差不多。获取到位移的X Y的变量,给控件设置坐标。
<强> 1.指数。wxml
简单的设置一张图片,添加触摸事件监听。点击事件监听。根据触摸事件获取X Y位移,设置为图像的位置
<强> 2.指数。js
<强> 3.指数。wxs
这里需要设置z - index
以上是“微信小程序如何实现拖拽图片触摸事件监听”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
