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

by · 2018年4月10日

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

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

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

 

1.index.wxml

<image src="../images/gundong.png" bindtap="ballClickEvent" style="bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent"> 
</image>
2.css.wxss
.image-style{
 position: absolute;
 bottom: 240px;
 right: 100px;
 width: 60px;
 height: 60px;
 z-index: 100;
}
3.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('点击了....')
 }
})

You may also like...

发表评论

Follow:

近期评论