微信小程序 实现拖拽事件监听实例详解


Posted in Javascript onNovember 16, 2016

微信小程序 拖拽监听功能:

        在软件开发或者 APP应用开发的时候,经常会遇到拖拽监听,最近自己学习微信小程序的知识,就想实现这样的拖拽效果,这里就记录下。

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

上GIF:

微信小程序 实现拖拽事件监听实例详解

Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标.

1.index.wxml

../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 () { 
[javascript] view plain copy
<span style="white-space:pre"> </span>//获取屏幕宽高 
  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; 
}

Javascript 相关文章推荐
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 #Javascript
JavaScript仿微博发布信息案例
Nov 16 #Javascript
使用Node.js给图片加水印的方法
Nov 15 #Javascript
Node.js批量给图片加水印的方法
Nov 15 #Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 #Javascript
AngularJS extend用法详解及实例代码
Nov 15 #Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 #Javascript
You might like
php var_export与var_dump 输出的不同
2013/08/09 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
javascript html5摇一摇功能的实现
2016/04/19 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
Python延时操作实现方法示例
2018/08/14 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Python坐标线性插值应用实现
2019/11/13 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
生物技术专业毕业生求职信范文
2013/12/14 职场文书
七夕活动策划方案
2014/08/16 职场文书
2015年检验科工作总结
2015/04/27 职场文书
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
Python Flask实现进度条
2022/05/11 Python