微信小程序实现拖动悬浮图标功能详解

• 在微信小程序开发中，实现一个可拖动的悬浮图标是一个常见的前端需求。
• 这一功能通常用于快捷操作或客服入口，提升用户体验。

WXML页面结构定义

首先，我们需要在页面的WXML文件中定义悬浮图标的结构。

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

TypeScript交互逻辑

接着，在TypeScript逻辑文件中处理触摸事件，计算图标位置。

        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() {
            }
        })

WXSS样式配置

同时，通过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;
    }

JSON配置文件

最后，在JSON配置文件中设置页面标题及组件引用。

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

至此，关于微信小程序实现拖动悬浮图标效果的教程已完成。如需了解更多相关内容，建议查阅本站往期文章或继续浏览后续章节，感谢大家的支持。