微信小程序拖拽组件封装

效果展示

git 仓库地址

git仓库地址

https://github.com/MrITzhongzi/small_routine_components/tree/master/drag_component

思路

利用小程序的事件系统，在touchmove，即手指在屏幕上移动的时候改变组件的 固定定位的 top和left css属性

参考文章

参考文章
https://www.jianshu.com/p/4cf32621449b

使用示例

1. wxml

<drag-component
  imageUrl="/drag.png"
  jumpUrl="/index/index"
  name="我的组件"
></drag-component>

2. json

{
  "usingComponents": {
    "drag-component": "/component/drag_component"
  }
}

组件核心代码

• wxml

<view class="drag-com-box"
 bindtouchstart="start"
 bindtouchmove="move"
 bindtouchend="end"
 bindtouchcancel="cancel"
 style="left: {{position.x}}px;top: {{position.y}}px "
 bindtap="jump"
 >

  <view class="iamge-box"> 
    <image src="{{imageUrl}}" mode="widthFix"></image>
  </view>
  <view class="desc">{{name}}</view>
</view>

• wxss

 .drag-com-box {
   width: 72px;
   height: 72px;
   box-sizing: border-box;
   border-radius: 36px;
   padding: 6px;
   border: 1px solid #ccc;
   text-align: center;
   background: rgba(0,0,0,0.3);
   position: fixed;
   right: 0px;
   bottom: 50px;
   z-index: 20;
 }
 .iamge-box {
   width: 100%;
 }

  .iamge-box image {
    width: 60%;
  }

 .desc {
   font-size: 11px;
   color: white;
 } 

• json

{
  "component": true,
  "usingComponents": {}
}

• js

// component/drag_component.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    imageUrl: String,
    jumpUrl: String,
    name: String
  },

  /**
   * 组件的初始数据
   */
  data: {
    position: {
      x: "",
      y: ""
    },
    screenParam: {
      width: "",
      height: ""
    },
    prePosition: {
      x: "",
      y: ""
    }
  },

  /**
   * 组件生命周期
   */
  lifetimes: {

    attached: function () {
      console.log(this.data)
      let self = this;
      // 在组件实例进入页面节点树时执行
      wx.getSystemInfo({
        success: function(res) {
          console.log(res);
          console.log("platform", res.platform);
          console.log(res.model);
          //可用窗口的宽度，高度
          console.log("height=" + res.windowHeight);
          console.log("width=" + res.windowWidth);

          self.setData({
            screenParam: {
              width: res.windowWidth,
              height: res.windowHeight
            },
            position: {
              x: res.windowWidth - 60,
              y: res.windowHeight - 100
            }
          });
        },
      })
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    start: function(e){
      console.log(e);
    },
    move: function(e){
      console.log(e);
      var tmpx = parseInt(e.touches[0].clientX);
      var tmpy = parseInt(e.touches[0].clientY);
      if(tmpx <= 0 || 
          tmpy <= 0 || 
          tmpx > this.data.screenParam.width ||
          tmpy > this.data.screenParam.height) {

          } else {
            if(tmpx != this.data.prePosition.x || tmpy != this.data.prePosition.y) {
              this.setData({
                position: {
                  x: tmpx-36,
                  y: tmpy-36
                },
                prePosition: {
                  x: tmpx-36,
                  y: tmpy-36
                }
              });
            }
          }
          console.log(this.data);
    },
    end: function(e) {
      console.log(e)
    },
    cancel: function(e){
      console.log(e)
    },
    jump: function(){
      console.log(this.data.jumpUrl)
      if (this.data.jumpUrl) {
        wx.navigateTo({
          url: this.data.jumpUrl,
        })
      }
    }

  }
})