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

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

在软件开发或者 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;
}
赞 (0)

相关推荐

  • 微信小程序 框架详解及实例应用

    微信小程序 框架详解及实例应用

    快速了解微信小程序的使用,一个根据小程序的框架开发的todos app 微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程,做了一个常规的todo app.这个app基于微信小程序的平台,实现了todo app的常规功能,同时为了让它更接近实际的工作场景,也用到了loading与toast这两个组件来完成一些操作的交互与反馈.这个平台给我的直观感受是

  • 微信小程序 数据访问实例详解

    微信小程序 数据访问实例详解

    先简单说一下,小程序的结构 如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚本也就是.js文件,他有固定格式:page,是用于获取数据的 3.utils是用来放置数据接口的 数据访问,如果懂点ajax,都不是问题,没啥好讲的 微信小程序,因为IDE太烂了,如果代码再写得难以阅读,整个项目就很难维护了. 因为没有写过app,不知道在app中数据访问

  • 微信小程序 WXML、WXSS 和JS介绍及详解

    前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的宽容度​那么高,单标签必需是 /> 结尾的.不然会报错. 1.2 ​官方推荐使用的基础标签<view>是块标签,给了<text>作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签.并且wxml的parser会把标签上的不在白名单上的属性都去掉,cla

  • 微信小程序 后台https域名绑定和免费的https证书申请详解

    微信小程序 后台https域名绑定和免费的https证书申请详解

    微信小程序 后台https域名绑定和免费的https证书申请详解 微信小程序在11月3号发布了,这是一个全新的生态,没有赶上微信公众号红利的开发者,运营者可别错过这趟车了. 但是微信的后台需要全https,之前我还不相信,后台注册了后进后台才发现,服务器配置如下图 从后台的服务器配置可以看出 (1)微信小程序后台只支持https,如果公司后台还没支持https的,赶紧要升级了 (2)API请求,文件上传,socket 文件上传和下载,必须是在后台配置的,否则微信不允许你下载       另外,h

  • 微信小程序 删除项目工程实现步骤

    微信小程序 删除项目工程实现步骤

    微信小程序如何删除项目工程 微信小程序现在非常火,也许是前端工程师有一个春天的来临,最近学习这部分知识,也做些小的DEMO ,这里就说下如何实现小程序的项目工程删除. 微信小程序本地创建的项目没有删除功能,我通过尝试找到了可以清理的方法,只在Mac osx测试通过,windows可以根据原理自行解决,估计原理都是一致的: 删除数据文件夹下的Default即可,属于全部清理,删除后需要重新扫二维码登录. Mac osx 下目录: $HOME/Library/Application Support/

  • 微信小程序教程之本地图片上传(leancloud)实例详解

    微信小程序教程之本地图片上传(leancloud)实例详解

    微信小程序 leancloud --本地图片上传 由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下. 将本地图片上传至leancloud后台. 获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客 直接上代码: 1.index.js //index.js //获取应用实例 var app = getApp() const AV = require('../../utils/av-weapp.js'); Page({ da

  • 微信小程序 实战小程序实例

    微信小程序 实战小程序实例

    微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start. 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳转传值使用 等等等.... app.json全局配置文件 { "pages":[ "page

  • 微信小程序（应用号）简单实例应用及实例详解

    微信小程序（应用号）简单实例应用及实例详解

    Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正

  • 微信小程序 保留小数(toFixed)详细介绍

    微信小程序 保留小数(toFixed)详细介绍

     微信小程序 保留小数(toFixed) 今天遇到了不少问题,问题虽小,这里记录下 微信小程序 保留小数(toFixed)的知识: 1.保留小数点后几位小数. 方法很简单.toFixed()即可.括号内的数字表示保留的位数.如果是整数,就会不上0 特别注意:这方法返回的是String,我开始不知道,拿着返回值去做加法,折腾半个小时都是拼字符串,问了黄秀杰大神才知道搞错了.然后用parseInt()转换类型才拿到值. 2.获取几位数 toPrecision() 上图;第一组是获取四位数,第二组是获

  • 微信小程序 网络API Websocket详解

    微信小程序 网络API: 微信小程序 网络API发起请求 微信小程序 网络API 上传.下载 微信小程序 网络API Websocket wx.connectSocket(OBJECT) ​ 创建一个 WebSocket 连接:一个微信小程序同时只能有一个WebSocket连接,如果当前已存在一个WebSocket连接,会自动关闭该连接,并重新创建一个WebSocket连接. OBJECT参数说明: 参数 类型 必填 说明 url String 是 开发者服务器接口地址,必须是HTTPS协议,且

  • 微信小程序 vidao实现视频播放和弹幕的功能

    微信小程序 vidao实现视频播放和弹幕的功能

    微信小程序 vidao视频播放及弹幕的功能的实现. vidao 我现在看到的官方文档是不带danmu(弹幕)属性的,之前是有的,不过现在这个属性还可以生效.控制视频的状态可以根据video标签的唯一id得到一个对象实例.video组件并不具备action属性,不能通过action来控制. .wxml <view class="section tc"> <video src="{{src}}" controls ></video>

随机推荐