微信小程序拖拽控件组件封装

这篇文章主要为大家详细介绍了微信小程序实现在界面之上可以拖拽移动控件组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

效果展示

按住拖动.jpg

主要代码

在小程序目录components文件下新建Component文件：move-btn/index

新建.png

wxml

<view class='move_btn' catchtouchmove="moveBtn" style="top:{{top}}rpx;left:{{left}}rpx">{{text}}</view>

js

properties: {
   text: String //传入组件的按钮文字
},
data: {
  top: 800, // 距离顶部的默认位置
  left: 630 // 距离左边的默认位置
},
methods: {
    //组件实现拖动效果
    moveBtn: function (e) {
      var that = this
      if (e.touches[0].clientX < (wx.getSystemInfoSync().windowWidth - 55) && e.touches[0].clientX > 0 && e.touches[0].clientY < (wx.getSystemInfoSync().windowHeight - 55) && e.touches[0].clientY > 0) {
        wx.getSystemInfo({
          success: function (res) {
            let X = (e.touches[0].clientX * (750 / res.windowWidth)); 
            // 将高度乘以换算后的该设备的rpx与px的比例
            let Y = (e.touches[0].clientY * (750 / res.windowWidth)); 
            // 将高度乘以换算后的该设备的rpx与px的比例
            that.setData({
              left: X,
              top: Y
            })
          }
        })

      }
    }
  }
})

wxss

可以根据界面风格自己调整样式

.move_btn {
  position: fixed;
  z-index: 9;
  width: 110rpx;
  height: 110rpx;
  box-sizing: border-box;
  padding: 0 28rpx;
  font-size: 24rpx;
  box-sizing: border-box;
  border-radius: 50%;
  background: #233cff;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

使用方法

在需要使用的界面json文件中引入

"usingComponents": {
    "move-btn": "/components/move-btn/index"
}

html上添加如下代码，传入按钮文字，自定义方法

<!-- 添加设备 -->
<move-btn catchtap="myMethod" text="按住拖动"></move-btn>