滑动动画

实现一个悬浮按钮上滑展开，下滑收起效果

收起 展开

设置变量serviceShow判断上滑下滑，默认是false

<button class="coustom {{serviceShow&&'servicer_move'}}" open-type="contact" wx:if="{{title}}">
    <image src="/static/images/icon/customactive.png" style="width: 320rpx;height: 112rpx;transition: all 1s;"></image>
</button>

在整个页面外部添加下滑上滑方法

<view bindtouchstart="handletouchstart" bindtouchmove="handletouchmove">

page外部申明变量

let startX = 0,
  startY = 0,
  t;

  //滑动开始事件
  handletouchstart: function (e) {
    startX = e.touches[0].pageX,
    startY = e.touches[0].pageY;
  },
 // 监听页面滚动事件
  handletouchmove (e) {
    let that = this;
    console.log("pageTouchmove", e);
    let moveEndX = e.touches[0].pageX,
      moveEndY = e.touches[0].pageY,
      X = moveEndX - startX,
      Y = moveEndY - startY;
    if (Math.abs(Y) > Math.abs(X) && Y > 0) {
      that.setData({
        serviceShow: false,
      })
      clearTimeout(t);
      t = setTimeout(function () {
        that.setData({
          serviceShow: true,
        })
      }, 3e3)
    } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
      that.setData({
        serviceShow: true,
      })
    } else {
      console.log("just touch");
    }
}

.servicer_move {
  transform: translateX(65%);
}
.servicer_move image{
  transform: translateX(-65%);
}
.coustom{
  position: fixed;
  bottom: 310rpx;
  right: 24rpx;
  height: 112rpx;
  border-radius: 112rpx;
  overflow: hidden;
  transition: all 1s;
  padding: 0;
}