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


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 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
webpack打包js的方法
Mar 12 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
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中遇到的时区问题解决方法
2015/07/23 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
WAF的正确bypass
2017/01/05 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
python获取本地计算机名字的方法
2015/04/29 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
Python通过文本和图片生成词云图
2020/05/21 Python
python实现自动打卡的示例代码
2020/10/10 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
信息技术专业个人自我评价
2013/12/11 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
民主生活会剖析材料
2014/09/30 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
谢师宴答谢词
2015/01/05 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书