小程式上是實現拖動懸浮圖示

• 小程式上是實現拖動圖示

• 效果

• 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": {}
      }