微信小程序实现拖拽 image 触摸事件监听的实例


Posted in Javascript onAugust 17, 2017

微信小程序实现拖拽 image 触摸事件监听的实例

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

实现效果图:

微信小程序实现拖拽 image 触摸事件监听的实例

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

1.index.wxml

<image class="image-style" src="../../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 () { //获取屏幕宽高 
  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 相关文章推荐
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 Javascript
jQuery 表格插件整理
Apr 27 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
js中this对象用法分析
Jan 05 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 #Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 #Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 #Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 #jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 #jQuery
vue中appear的用法
Aug 17 #Javascript
Angularjs单选框相关的示例代码
Aug 17 #Javascript
You might like
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
python 调整图片亮度的示例
2020/12/03 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
小区的门卫岗位职责
2014/10/01 职场文书
领导欢送会主持词
2015/07/06 职场文书
感恩老师主题班会
2015/08/12 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
Python中的 Set 与 dict
2022/03/13 Python
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python