H5,vue2实现悬浮按钮拖拽

该博客介绍了如何在H5和Vue2环境下实现移动端的悬浮按钮拖拽效果。通过监听touchstart、touchmove和touchend事件,结合CSS3动画,实现按钮的拖动和松手后的定位动画。同时,当长按时,会显示一个下拉列表,可以通过改变按钮的位置来调整下拉列表的展示方向。
摘要由CSDN通过智能技术生成

<template>
  <div class="shortcut" @touchstart="touchstart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)" v-if="isMobile">
    <div class="shortcut__container">
      <transition name="fade">
        <div class="shadow" v-if="showPopover" @click.stop="showPopover = false"></div>
      </transition>
      <transition name="sub-fade">
        <div :class="['shortcut__list', `${type}`]" v-if="showPopover">
          <div class="shortcut__list_item">
            <div class="icon-box"><img src="@/images/common/ic_question.png" alt=""></div>
            投资理财
          </div>
          <div class="shortcut__list_item">
            <div class="icon-box"><img src="@/images/common/ic_question.png" alt=""></div>
            我的资产
          </div>
          <div class="shortcut__list_item">
            <div class="icon-box"><img src="@/images/common/ic_question.png" alt=""></div>
            咨询我们
          </div>
        </div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值