微信小程序拖动方块，自动吸附右边效果实现（通过监听view来改变data）

实现效果

 

 

实现思路：

1、声明一个view，并加上bindtouchend结束方法、bindtouchstart开始方法和catchtouchmove方法，声明动态的css样式

<view class="contact_box" wx:if="{{contact_show}}" bindtouchstart="buttonStart" bindtouchend="buttonEnd" catchtouchmove="buttonMove"  bindtap="to_contact" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;">
    <view>拖动移动</view>
</view>

2、通过移动距离和位置判断，更改data的值

  data{
    contact_show:true,
    buttonTop:0,
    buttonLeft: 0,
    },


    buttonStart: function (e) {
    startPoint = e.touches[0]//获取拖动开始点
  },
  buttonMove: function (e) {
    var endPoint = e.touches[e.touches.length - 1]//获取拖动结束点
    //计算在X轴上拖动的距离和在Y轴上拖动的距离
    var translateX = endPoint.clientX - startPoint.clientX
    var translateY = endPoint.clientY - startPoint.clientY
    startPoint = endPoint//重置开始位置
    var buttonTop = this.data.buttonTop + translateY
    var buttonLeft = this.data.buttonLeft + translateX
    //判断是移动否超出屏幕
    if (buttonLeft+90  >= this.data.windowWidth) {
      buttonLeft = this.data.windowWidth - 90;
      return false;
    }
    if (buttonLeft <= 0) {
      buttonLeft = 0;
      return false;
    }
    if (buttonTop <= this.data.navH) {
      buttonTop = this.data.navH
      return false;
    }
    if (buttonTop + 50 >= this.data.windowHeight) {
      buttonTop = this.data.windowHeight - 50;
      return false;
    }
    this.setData({
      buttonTop: buttonTop,
      buttonLeft: buttonLeft,
      is_show_contact:false,
    })
  },
  buttonEnd: function (e) {
    this.setData({
      buttonLeft: this.data.windowWidth - 90,
      is_show_contact:true,
    });
  },

css样式：

.contact_box {
    position: fixed;
    bottom: 90rpx;
    right: 0rpx;
    width: 180rpx;
    height: 120rpx;
    display: flex;
    justify-content: flex-end;
    z-index: 1;
}
.contact_box .contact {
    width: 180rpx;
    height: 120rpx;
    pointer-events: none;
}
.contact image {
    width: 90rpx;
    height: 90rpx;
    margin-top: 15rpx;
    margin-left: 17rpx;
    border-radius: 45rpx;
    background-color: #fff;
}

体验效果：

疯狂修改data值，会导致小程序僵住，消耗性能，还会有延迟，效果不佳，体验感差。可以用另一种方法实现，用小程序封装组件来实现（movable-area+movable-view），不会的小伙伴，可以看到下个文章，会有操作用例