美文网首页
小程序端悬浮按钮可以拖拽的demo

小程序端悬浮按钮可以拖拽的demo

作者: 泪滴在琴上 | 来源:发表于2024-01-09 11:33 被阅读0次
<template>
  <div class="floating-button"
    :style="{ position: 'fixed', right: buttonStyle.right, top: buttonStyle.top, transform: buttonStyle.transform }"
    @touchstart="startDrag" @touchmove.prevent="onDrag" @touchend="endDrag" @touchcancel="endDrag" @click="gotoAI">
    <img src="../../../static/images/product/kefu1.png" />
    <p>智能客服</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      buttonStyle: {
        position: "fixed",
        right: "2px",
        top: "400px",
        zIndex: 999,
      },
      dragging: false,
      initialX: 0,
      initialY: 0,
      offsetX: 0,
      offsetY: 0,
    };
  },
  methods: {
    gotoAI() {
      let url = "../../pages/customMessage/main"
      mpvue.navigateTo({ url });
    },
    startDrag(event) {
      event.preventDefault(); // 阻止默认行为
      this.dragging = true;
      // 记录初始触摸位置
      this.initialX = event.touches[0].clientX;
      this.initialY = event.touches[0].clientY;

      // 记录当前偏移量
      this.offsetX = parseInt(this.buttonStyle.right.slice(0, -2));
      this.offsetY = parseInt(this.buttonStyle.top.slice(0, -2));
    },
    onDrag(event) {
      event.preventDefault(); // 阻止默认行为
      if (this.dragging) {
        // 计算偏移量
        const deltaX = event.touches[0].clientX - this.initialX;
        const deltaY = event.touches[0].clientY - this.initialY;
        // 更新按钮位置
        this.buttonStyle.right = `${this.offsetX - deltaX}px`;
        this.buttonStyle.top = `${this.offsetY + deltaY}px`;
      }
    },
    endDrag(event) {
      event.stopPropagation();
      this.dragging = false;
    },
  }
};
</script>
<style scoped>
.floating-button {
  width: 100rpx;
  height: 124rpx;
  opacity: 0.9;
  border-radius: 10rpx 0 0 10rpx;
  background: linear-gradient(180deg, rgba(54, 113, 155, 1) 0%, rgba(10, 46, 56, 1) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.floating-button img {
  width: 60rpx;
  height: 60rpx;
  display: block;
  margin-bottom: 10rpx;
}

.floating-button p {
  font-size: 20rpx;
  font-weight: 400;
  letter-spacing: 0px;
  color: rgba(249, 249, 249, 1);
  text-align: center;
}
</style>

相关文章

  • 仿苹果手机客户端悬浮按钮 assisTouchButton

    仿苹果手机客户端悬浮按钮 assisTouchButton 可以自定义按钮背景图片,颜色,触发事件,可以任意拖拽最...

  • HTML5拖拽上传

    传统拖拽效果小demohtml5实现拖拽小demo调查问卷小demo拖拽拼图小demo拖拽上传小demo h5拖拽...

  • Android 可拖拽悬浮按钮

    最近有一个小的效果,就是界面上悬浮一个按钮且这个按钮可以任意拖拽,并且自动吸附到边上。其实这个功能不是很难,不过也...

  • Vue拖拽悬浮按钮

    背景:最近做的页面原本有一个点赞悬浮按钮,但是在不同分辨率的移动设备屏幕上,后边的文字显示位置不固定,有的会被悬浮...

  • 移动端悬浮按钮

    分享一个uniapp中的悬浮按钮,移动端开发有时候会遇到悬浮按钮的使用,它可以定位不同位置也可以配置展开菜单,菜单...

  • iOS 悬浮按钮的实现

    项目中为了语音功能的更好体验,加了个悬浮按钮,网上找了好久,最终集成了一个悬浮按钮,效果还不错。 参考Demo 可...

  • 可以在屏幕上移动的悬浮窗

    悬浮窗上有按钮,可以关掉悬浮窗

  • 悬浮按钮

    FloatingActionButton 悬浮按钮 悬浮按钮时DesignSupport库的一个控件,可以帮助我们...

  • ionic4-指令实现ion-fab悬浮按钮的拖拽

    ionic4-指令实现ion-fab悬浮按钮的拖拽 效果: 使用: 在ion-fab加上:absolute-dra...

  • 几句代码实现轻量级可拖动button

    有的时候的悬浮按钮并不需要一直在后台运行,而且写service的悬浮按钮的demo也很多,最近碰到一个需求,只要在...

网友评论

      本文标题:小程序端悬浮按钮可以拖拽的demo

      本文链接:https://www.haomeiwen.com/subject/sqeawdtx.html