快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)拖動(dòng)懸浮圖標(biāo)效果

更新時(shí)間：2024年04月17日 10:12:15 作者：不完美的完美

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖動(dòng)懸浮圖標(biāo)效果,小程序上是實(shí)現(xiàn)拖動(dòng)圖標(biāo),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

小程序上是實(shí)現(xiàn)拖動(dòng)圖標(biāo)
效果

index.wxml

 <view>
      <view class="move-box"  catchtouchmove="buttonMove" bindtouchstart="buttonStart"  style="top:{{buttonTop}}px;left:{{buttonLeft}}px;"  >
          懸浮圖標(biāo)
      </view>
  </view>

index.ts

        let startPoint: any;
        Page({
            /**
            * 頁面的初始數(shù)據(jù)
            */
            data: {
                //按鈕位置參數(shù)
                buttonTop: 0,
                buttonLeft: 0,
                windowHeight: '',
                windowWidth: '',
            },
            /**
            * 生命周期函數(shù)--監(jiān)聽頁面加載
            */
            onLoad() {
            },
            buttonInit() {
                // 獲取圖標(biāo)控件適配參數(shù)
                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, // 這里定義按鈕的初始位置
                    })
                  }
                })
              },
            //以下是按鈕拖動(dòng)事件
            buttonStart: function (e: any) {
                startPoint = e.touches[0]//獲取拖動(dòng)開始點(diǎn)
            },
            buttonMove: function (e: any) {
                const endPoint = e.touches[e.touches.length - 1]//獲取拖動(dòng)結(jié)束點(diǎn)
                //計(jì)算在X軸上拖動(dòng)的距離和在Y軸上拖動(dòng)的距離
                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
                //判斷是移動(dòng)否超出屏幕
                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
                })
            },
            /**
            * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
            */
            onReady() {
            },
            /**
            * 生命周期函數(shù)--監(jiān)聽頁面顯示
            */
            onShow() {
                this.buttonInit();
            },
            /**
            * 生命周期函數(shù)--監(jiān)聽頁面隱藏
            */
            onHide() {
            },
            /**
            * 生命周期函數(shù)--監(jiān)聽頁面卸載
            */
            onUnload() {
            },
            /**
            * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
            */
            onPullDownRefresh() {
            },
            /**
            * 頁面上拉觸底事件的處理函數(shù)
            */
            onReachBottom() {
            },
            /**
            * 用戶點(diǎn)擊右上角分享
            */
            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":"拖動(dòng)懸浮圖標(biāo)",
        "usingComponents": {}
    }

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)拖動(dòng)懸浮圖標(biāo)效果的文章就介紹到這了,更多相關(guān)小程序拖動(dòng)懸浮圖標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: