微信小程序实现拖拽的小球

        

目录

前言 

js 

获取微信小程序中获取系统信息

触摸移动事件的处理函数

触摸结束事件的处理函数

 用于监听页面滚动事件

全局参数 

html

CSS

---

前言 

小程序开发提供了丰富的API和事件处理函数，使得开发者可以方便地实现各种交互功能。其中，拖拽功能是一个在许多应用场景中常见的需求，例如拖拽按钮、拖拽图片等。本文将介绍一个小程序页面中实现拖拽移动元素的功能的代码示例，并解析其实现原理。

js 

这段代码主要是一个小程序页面中实现了拖拽移动元素的功能。具体解释如下：

1. getSysdata 函数：该函数使用 wx.getSystemInfo 方法获取系统的相关信息，如窗口宽度和高度，并将其存储到 that.data.window 数组中。之后根据一定的比例计算出一个定位值 write，再通过 that.setData 方法将 write 设置为页面的数据，在回调函数中使用 wx.createSelectorQuery 方法获取元素的宽度和高度，存储到 that.data.writesize 数组中。

2. touchmove 函数：该函数是拖拽过程中触发的事件处理函数。通过获取触摸点的坐标减去元素宽度和高度的一半，再减去页面的滚动距离，得到当前元素的位置。然后判断该位置是否超出屏幕范围，如果超出则将位置设置为边界值。最后通过 that.setData 方法将最新的位置信息存储到页面数据中。

3. onPageScroll 函数：该函数用于监听页面滚动事件，并将滚动距离存储到 this.data.scrolltop 中。

4. touchend 函数：该函数是拖拽结束时触发的事件处理函数。首先获取当前元素的位置和窗口的宽度、高度以及元素的大小。如果当前位置在屏幕的左、右、上、下边缘处，则直接返回，不执行回到边缘的逻辑。否则，通过计算最近的水平边缘和垂直边缘的位置，并判断最近的边缘是水平边缘还是垂直边缘，将元素位置设置为最近边缘的位置。最后通过 that.setData 方法将最新的位置信息存储到页面数据中。

获取微信小程序中获取系统信息

这段代码是一个小程序（微信小程序）中的 JavaScript 代码段，用于获取系统信息和元素尺寸，并做一些相关的计算和操作。具体来说，它执行以下操作：

1. 首先，定义了一个函数 getSysdata，这个函数似乎是用来获取系统信息和元素尺寸的。

2. 在函数内部，通过调用 wx.getSystemInfo 函数来获取系统信息。这个函数的结果会在 success 回调函数中被处理。

3. 在 success 回调函数中，将获取到的系统窗口宽高（windowWidth 和 windowHeight）存储在 that.data.window 数组中。

4. 接下来，根据一定的逻辑计算得到一个名为 write 的数组，其中 write[0] 是系统窗口宽度的某个百分比（that.data.writePosition[0]）以像素为单位的值，而 write[1] 则是系统窗口高度的某个百分比（that.data.writePosition[1]）以像素为单位的值。

5. 使用 that.setData 函数来更新小程序的数据，将 write 数组设置为新的数据。在这里还提供了一个回调函数，在这个回调函数中执行如下操作&#x