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

不完美的完美發表於2024-04-17

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

  • 效果

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

相關文章