vue，移动端h5，如何实现类似微信聊天列表的长按下拉框效果？

Question

![上传中...]()

如图，主要是下面效果（具体的可以在微信里试试，这里发不了视频抱歉🙏）

1. 在长按项的固定偏离位置出现下拉框
2. 点击界面其他位置，下拉框消失
3. 一个小细节：下拉框出现时，界面其实是无法滑动的，滑动会先触发下拉框的消失，然后再次触摸页面滑动才可滑动

Answer 1

我这里有一个非Vue项目模仿【模仿微信聊天列表长按出现菜单的效果】的，和你要的效果一样，你看完改造成Vue组件很简单，
demo在线地址，

用手机打开或者chrome F12切换到移动端模式查看，具体的代码仓库在https://gitee.com/rioli/list-popper-menu

如果觉得可以的话，采用这个答案，顺便给https://gitee.com/rioli/list-popper-menu点个star。

此外，如果你还想学习更多的前端知识，欢迎关于我的微信公众号【前端列车长】，在那里我会分享更多前端知识、干货。