小程序上是实现拖动悬浮图标

• 小程序上是实现拖动图标

• 效果

• index.wxml

    <view>
        <view class="move-box"  catchtouchmove="buttonMove" bindtouchstart="buttonStart"  style="top:{{buttonTop}}px;left:{{buttonLeft}}px;"  >
            悬浮图标
        </view>
    </view>
  

• index.ts

          let startPoint: any;
          Page({
  
              /**
              * 页面的初始数据
              */
              data: {
                  //按钮位置参数
                  buttonTop: 0,
                  buttonLeft: 0,
                  windowHeight: '',
                  windowWidth: '',
              },
  
              /**
              * 生命周期函数--监听页面加载
              */
              onLoad() {
  
              },
              buttonInit() {
                  // 获取图标控件适配参数
                  var that = this;
                  wx.getSystemInfo({
                    success: function (res: any) {
                      // 屏幕宽度、高度
                      // 高度,宽度 单位为px
                      that.setData({
                        windowHeight: res.windowHeight,
                        windowWidth: res.windowWidth,
                        buttonTop: res.windowHeight * 0.70, // 这里定义按钮的初始位置
                        buttonLeft: res.windowWidth * 0.70, // 这里定义按钮的初始位置
                      })
  
                    }
                  })
                },
              //以下是按钮拖动事件
              buttonStart: function (e: any) {
                  startPoint = e.touches[0]//获取拖动开始点
              },
              buttonMove: function (e: any) {
                  const endPoint = e.touches[e.touches.length - 1]//获取拖动结束点
                  //计算在X轴上拖动的距离和在Y轴上拖动的距离
                  const translateX = endPoint.clientX - startPoint.clientX
                  const translateY = endPoint.clientY - startPoint.clientY
                  startPoint = endPoint//重置开始位置
                  let buttonTop: any = this.data.buttonTop + translateY
                  let buttonLeft: any = this.data.buttonLeft + translateX
                  //判断是移动否超出屏幕
                  const windowWidth: any = this.data.windowWidth;
                  const windowHeight: any = this.data.windowHeight;
                  if (buttonLeft + 60 >= windowWidth) {
                      buttonLeft = windowWidth - 60;
                  }
                  if (buttonLeft <= 0) {
                      buttonLeft = 0;
                  }
                  if (buttonTop <= 0) {
                      buttonTop = 0
                  }
                  if (buttonTop + 60 >= windowHeight) {
                      buttonTop = windowHeight - 60 - 40;
                  }
                  this.setData({
                      buttonTop: buttonTop,
                      buttonLeft: buttonLeft
                  })
              },
              /**
              * 生命周期函数--监听页面初次渲染完成
              */
              onReady() {
  
              },
  
              /**
              * 生命周期函数--监听页面显示
              */
              onShow() {
                  this.buttonInit();
              },
  
              /**
              * 生命周期函数--监听页面隐藏
              */
              onHide() {
  
              },
  
              /**
              * 生命周期函数--监听页面卸载
              */
              onUnload() {
  
              },
  
              /**
              * 页面相关事件处理函数--监听用户下拉动作
              */
              onPullDownRefresh() {
  
              },
  
              /**
              * 页面上拉触底事件的处理函数
              */
              onReachBottom() {
  
              },
  
              /**
              * 用户点击右上角分享
              */
              onShareAppMessage() {
  
              }
          })
  

• index.wxss

      .move-box {
          position: fixed;
          width: 45px;
          height: 45px;
          background-color: aquamarine;
          border-radius: 50%;
          font-size:12px;
          text-align: center;
          padding: 5px;
          box-sizing: border-box;
          color:blueviolet;
          font-weight: 600;
      }
  

• index.json

      {
          "navigationBarTitleText":"拖动悬浮图标",
          "usingComponents": {}
      }