微信小程序开发之拖拽监听功能

时间：2023-07-01 14:05 阅读数：117 人阅读分类：知识百科

众所周知，微信小程序开发已经流行一段时间啦，但我们在小程序开发的时候经常会遇到小程序拖拽监听功能，那小编就来讲讲这个功能是如何实现的吧，下面小编整理了一些相关资料供大家参考。

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

　　1.小程序index.wxml

　　简单的设置一张图片,添加触摸事件监听.点击事件监听.根据触摸事件获取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;

　　}

以上就是微信小程序开发之拖拽监听功能的全部内容啦，是不是觉得微信小程序的拖拽监听功能挺容易学会的，那还等什么呢，赶紧学习操作吧。更多精彩内容就在微信小程序商店。