小程序悬浮框拖拽事件

最新推荐文章于 2024-01-02 17:56:33 发布

原创最新推荐文章于 2024-01-02 17:56:33 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用wxml和wxjs在微信小程序中实现可拖动按钮的方法。通过bindtouchstart、bindtouchmove和bindtouchend事件，结合屏幕尺寸的动态获取，确保了按钮在屏幕上平滑拖动且不超出边界。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxml

<view>
  <!-- 需要点击事件的话加个bindtap就行 -->
  <view catchtouchmove="buttonMove" bindtouchstart="buttonStart" catchtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;width: 50px;height:50px;border-radius:50px;position:fixed;background:#ff6700;line-height:50px;font-size:25pt;color:#fff;">+</view>
</view>

wxjs

var startPoint;
Page({
  data: {
    buttonTop: 0,
    buttonLeft: 0,
    windowHeight: '',
    windowWidth: ''
  },
  onLoad: function (options) {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        // 屏幕宽度、高度
        console.log('height=' + res.windowHeight);
        console.log('width=' + res.windowWidth);
        // 高度,宽度 单位为px
        that.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    })
  },

  onShow: function () {

  },

  buttonStart: function (e) {
    startPoint = e.touches[0]
  },
  buttonMove: function (e) {
    var endPoint = e.touches[e.touches.length - 1]
    var translateX = endPoint.clientX - startPoint.clientX
    var translateY = endPoint.clientY - startPoint.clientY
    startPoint = endPoint
    var buttonTop = this.data.buttonTop + translateY
    var buttonLeft = this.data.buttonLeft + translateX
    //判断是移动否超出屏幕
    if (buttonLeft + 50 >= this.data.windowWidth) {
      buttonLeft = this.data.windowWidth - 50;
    }
    if (buttonLeft <= 0) {
      buttonLeft = 0;
    }
    if (buttonTop <= 0) {
      buttonTop = 0
    }
    if (buttonTop + 50 >= this.data.windowHeight) {
      buttonTop = this.data.windowHeight - 50;
    }
    this.setData({
      buttonTop: buttonTop,
      buttonLeft: buttonLeft
    })
  },

  buttonEnd: function (e) {

  }

})