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

        

目录

前言 

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 数组设置为新的数据。在这里还提供了一个回调函数，在这个回调函数中执行如下操作：

   • 使用 wx.createSelectorQuery() 创建一个查询对象。
   • 使用 .select(".kefuBtn") 选择页面中类名为 .kefuBtn 的元素。
   • 调用 .boundingClientRect 方法获取该元素的宽度和高度，并将结果存储在 that.data.writesize 数组中。
   • 最后，通过调用 .exec() 执行上述查询操作。

总之，这段代码用于在微信小程序中获取系统信息（窗口尺寸）和特定元素的尺寸，并进行一些相关的计算和操作，可能是为了适应不同尺寸的设备和显示效果。

  getSysdata: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (e) {
        that.data.window = [e.windowWidth, e.windowHeight];
        var write = [];
        write[0] = (that.data.window[0] * that.data.writePosition[0]) / 100;
        write[1] = (that.data.window[1] * that.data.writePosition[1]) / 100;
        console.log(write, 45);
        that.setData(
          {
            write: write,
          },
          function () {
            // 获取元素宽高
            wx.createSelectorQuery()
              .select(".kefuBtn")
              .boundingClientRect(function (res) {
                console.log(res.width);
                that.data.writesize = [res.width, res.height];
              })
              .exec();
          }
        );
      },
      fail: function (e) {
        console.log(e);
      },
    });
  },

触摸移动事件的处理函数

这段代码是一个用来处理触摸移动事件的函数。当用户在页面上进行触摸移动操作时，该函数会被触发。

代码中的各个部分的功能如下所示：

1. 首先，通过var that = this;将当前上下文的this对象赋值给变量that，以确保在后续的代码中能够正确访问到页面的数据。

2. 然后，通过e.touches[0].pageX和e.touches[0].pageY获取当前触摸点相对于页面的水平和垂直位置，并将其分别存储在数组position的第一个和第二个元素中。同时，通过减去写作框的宽度的一半（that.data.writesize[0] / 2）和减去垂直滚动的偏移量（this.data.scrolltop）来调整写作框的中心位置。

3. 接下来，通过that.data.window[0]和that.data.window[1]分别获取屏幕的宽度和高度，以便后续判断写作框是否超出屏幕范围。

4. 使用条件语句判断写作框的水平和垂直位置是否超出屏幕范围。如果水平位置小于0，则将其设为0，以保证写作框不会超出屏幕左侧边界。如果水平位置大于屏幕宽度减去写作框宽度，则将其设为屏幕宽度减去写作框宽度，以保证写作框不会超出屏幕右侧边界。对于垂直位置，也进行了类似的判断和限制。

5. 最后，通过that.setData()方法将更新后的写作框位置应用到页面上，即将position赋值给write，以使得写作框显示在调整后的位置上。

综上所述，这段代码的主要功能是根据用户的触摸移动操作来调整写作框的位置，并保证写作框不会超出屏幕范围。

  //开始拖拽
  touchmove: function (e) {
    var that = this;
    var position = [
      e.touches[0].pageX - that.data.writesize[0] / 2,
      e.touches[0].pageY - that.data.writesize[1] / 2 - this.data.scrolltop,
    ];

    // 获取屏幕宽高
    var windowWidth = that.data.window[0];
    var windowHeight = that.data.window[1];

    // 判断是否超出屏幕范围
    if (position[0] < 0) {
      position[0] = 0;
    } else if (position[0] > windowWidth - that.data.writesize[0]) {
      position[0] = windowWidth - that.data.writesize[0];
    }

    if (position[1] < 0) {
      position[1] = 0;
    } else if (position[1] > windowHeight - that.data.writesize[1]) {
      position[1] = windowHeight - that.data.writesize[1];
    }

    that.setData({
      write: position,
    });

触摸结束事件的处理函数

这段代码是一个用于处理触摸结束事件的函数。在移动设备的触摸屏上，当用户的手指从屏幕上抬起时，会触发这个事件。代码的目的是确保用户在写字过程中，当触摸结束时，字的位置会自动靠近最近的屏幕边缘。

具体的步骤如下：

1. 通过touchend事件处理函数来执行以下操作。

2. 从事件对象中获取当前写字的位置，这个位置信息保存在position变量中。

3. 获取屏幕的宽度和高度，并将它们分别保存在windowWidth和windowHeight变量中。

4. 获取写字区域的尺寸，这个尺寸信息保存在writesize变量中。

5. 如果当前写字位置已经在屏幕的左、右边缘或上、下边缘，那么直接返回，不执行后续的将位置回到边缘的逻辑。

6. 如果当前写字位置不在边缘，那么计算离当前位置最近的水平边缘和垂直边缘。

7. 判断最近的边缘是水平边缘还是垂直边缘，通过比较写字位置与屏幕中心的距离来决定。

8. 如果最近的边缘是水平边缘，将写字位置的水平坐标设置为最近水平边缘的值，使得字能够贴近水平边缘。

9. 如果最近的边缘是垂直边缘，将写字位置的垂直坐标设置为最近垂直边缘的值，使得字能够贴近垂直边缘。

10. 最后，更新写字位置的数据，将位置信息设置为回到边缘后的位置。

总之，这段代码的作用是确保在用户停止触摸屏幕后，写字位置会自动靠近离它最近的屏幕边缘，从而使得写字的体验更加舒适和方便。

  touchend: function (e) {
    var that = this;
    var position = that.data.write;
    var windowWidth = that.data.window[0];
    var windowHeight = that.data.window[1];
    var writesize = that.data.writesize;

    // 如果位置在屏幕左、右边缘或上、下边缘，直接返回，不执行回到边缘的逻辑
    if (
      position[0] === 0 ||
      position[0] === windowWidth - writesize[0] ||
      position[1] === 0 ||
      position[1] === windowHeight - writesize[1]
    ) {
      return;
    }

    // 如果位置不是边缘，则自动回到最近的边缘
    var closestHorizontalEdge =
      Math.abs(position[0] - windowWidth / 2) < Math.abs(position[0])
        ? windowWidth - writesize[0]
        : 0;
    var closestVerticalEdge =
      Math.abs(position[1] - windowHeight / 2) < Math.abs(position[1])
        ? windowHeight - writesize[1]
        : 0;

    // 检查最近的边缘是水平边缘还是垂直边缘
    if (
      Math.abs(closestHorizontalEdge - position[0]) <
      Math.abs(closestVerticalEdge - position[1])
    ) {
      position[0] = closestHorizontalEdge;
    } else {
      position[1] = closestVerticalEdge;
    }

    that.setData({
      write: position,
    });
  },

 用于监听页面滚动事件

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

  onPageScroll(e) {
    this.data.scrolltop = e.scrollTop;
  },

全局参数 

  data: {
    // 拖拽参数
    writePosition: [85, 35], //默认定位参数
    writesize: [0, 0], // 元素大小
    window: [0, 0], //屏幕尺寸
    write: [0, 0], //定位参数
    scrolltop: 0, //据顶部距离
  },

html
 

这段代码是一个 HTML 的按钮元素，在页面上显示为一个按钮图标。按钮具有以下特性和功能：

• open-type="contact"：表示按钮的点击行为，当点击按钮时，会打开客服对话框，用户可以与客服进行沟通。
• bindtouchmove="touchmove"、catch:touchmove：表示当按钮被触摸移动时触发 touchmove 方法，这个方法可能是由程序定义和实现的。
• style="left:{{write[0]}}px;top:{{write[1]}}px;"：表示按钮的定位样式，left 和 top 样式用于指定按钮的水平和垂直位置。{{write[0]}} 和 {{write[1]}} 是可能由程序动态设置的变量。
• catch:touchend="touchend"：表示当按钮触摸结束时触发 touchend 方法，这个方法可能是由程序定义和实现的。

<button class='kefuBtn' open-type="contact"  bindtouchmove="touchmove" catch:touchmove style="left:{{write[0]}}px;top:{{write[1]}}px;" catch:touchend="touchend">
  <image class="kefu" src="../../iimage/kefu.png" />
</button>

CSS

.kefuBtn {
  position: absolute;
  background-color: transparent;
  border: none;
  outline: none;

  background: #fff !important;
  border-radius: 0rpx;
  padding: 0rpx;
  margin: 0rpx;
  display: inline-block;
  line-height: 1;
  width: 112rpx !important;
  height: 112rpx !important;
  border-radius: 50%;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15)
}

button::after {
  /*button的边框样式是通过::after方式实现的*/
  border: none;
}

.kefuBtn image {
  width: 112rpx;
  height: 112rpx;
}