微信小程序 浮标 页面滑动隐藏

效果看图吧！话不多说

js

Page({
  data: {
    lastX: 0, //滑动开始x轴位置
    lastY: 0, //滑动开始y轴位置
    text: "没有滑动",
    currentGesture: 0, //标识手势
    left: 450,
    statac: true
  },
  //滑动移动事件
  handletouchmove: function (event) {
    var currentX = event.touches[0].pageX
    var currentY = event.touches[0].pageY
    var tx = currentX - this.data.lastX
    var ty = currentY - this.data.lastY
    var text = ""
    //左右方向滑动
    if (Math.abs(tx) > Math.abs(ty)) {
      if (tx < 0)
        text = "向左滑动"
      else if (tx > 0)
        text = "向右滑动"
    }
    //上下方向滑动
    else {
      if (ty < 0)
        text = "向上滑动"
      else if (ty > 0)
        text = "向下滑动"

      if (this.data.statac) {
        this.data.statac = false;
        for (var i = 0; i < 20; i++) {
          var a = a < 650 ? this.data.left + (1 * i) : 650;
          this.setData({
            left: a
          })

        }

      }
    }

    //将当前坐标进行保存以进行下一次计算
    this.data.lastX = currentX
    this.data.lastY = currentY
    this.setData({
      text: text,
    });
  },
  handletouchend: function (event) {
    this.data.currentGesture = 0;

    if (this.data.statac === false) {
      for (var i = 0; i < 20; i++) {
        var a = a > 450 ? this.data.left - (1 * i) : 450;
        this.setData({
          left: a
        })
      }
    }
    this.data.statac = true
    this.setData({
      text: "没有滑动",
    });
  }
})

wxss

.ball {
  position: relative;
  box-shadow: 2px 2px 10px #AAA;
  border-radius: 20px;
  position: absolute;
  width: 100%;
  height: 100%;
}
.bouy{
  position:absolute;
  top: 600rpx;
  width: 100%;
  height: 250rpx;
  background-color: rgb(176, 194, 194);
}

.scroll-view{
  position: absolute;
  top: 0;
  left: 450rpx;
  width: 250rpx;
  height:250rpx;
  
}
.scroll-img{
  width: 230rpx;
}

wxml

<view id="id" class="ball" bindtouchmove="handletouchmove"  bindtouchend="handletouchend" style="width : 100%px;">
  {{text}}

  <view class="bouy">
    <view style="left: {{left}}rpx;" class="scroll-view">
      <image class="scroll-img" src="/images/buoy.png" mode="widthFix"></image>
    </view>
  </view>
</view>

关注公众，更多源码：