介绍
这篇文章主要介绍小程序之拖拽图片触摸事件监听的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>微信小程序实现拖拽图片触摸事件监听的实例强>
需要做个浮在滚动视图之上的按钮。尝试了一下。
实现效果图:
Android中也会有类似移动控件的操作。思路差不多。获取到位移的X Y的变量,给控件设置坐标。
<强> 1.指数。wxml 强>
& lt; image 类=癷mage-style", src=https://www.yisu.com/zixun/images/gundong.png " bindtap=" ballClickEvent”风格="底:{{ballBottom}} px;右:{{ballRight}} px; ballMoveEvent“bindtouchmove=> 图像>
简单的设置一张图片,添加触摸事件监听。点击事件监听。根据触摸事件获取X Y位移,设置为图像的位置
<强> 2.指数。js 强>
//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;), }大敌; })
<强> 3.指数。wxs 强>
这里需要设置z - index
.image-style {, ,位置:绝对的,, ,底部:240 px,, ,右:100 px,, ,宽度:60 px;, ,高度:60 px;, ,z - index:, 100; }
以上是“小程序之拖拽图片触摸事件监听的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!