<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>
H5,vue2实现悬浮按钮拖拽
最新推荐文章于 2024-08-20 16:45:53 发布
该博客介绍了如何在H5和Vue2环境下实现移动端的悬浮按钮拖拽效果。通过监听touchstart、touchmove和touchend事件,结合CSS3动画,实现按钮的拖动和松手后的定位动画。同时,当长按时,会显示一个下拉列表,可以通过改变按钮的位置来调整下拉列表的展示方向。
摘要由CSDN通过智能技术生成