PC 和移动端实现长按效果

  最近公司有个项目甲方想要个点赞的效果,有长按事件的身影,记录一下。

1、实现效果

2、HTML

1
2
3
4
5
6
7
8
9
10
11
<div 
class="thumb-up-icon"
oncontextmenu='self.event.returnValue=false'
@touchstart="addStart"
@touchend="addStop"
@touchmove="addStop"
@mousedown="addStart"
@mouseup="addStop"
@mouseout="addStop"
@click="thumbUp">
</div>

注意

  • oncontextmenu='self.event.returnValue=false'禁用右键点击
  • touch是移动端的方法
  • mouse是 PC 端的方法

3、Script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script>
import ThumbsUpAni from '../portal/canvas'

export default {
name: 'ThumbUp',
data() {
return {
thumbsUpAni: null,
timer: null
}
},
methods: {
// 添加 icon
thumbUp () {
this.thumbsUpAni.start()
},
// 持续添加 icon
addStart () {
this.timer && this.addStop()
this.timer = setInterval(() => {
this.thumbUp()
}, 80)
},
// 停止添加 icon
addStop () {
clearInterval(this.timer)
}
},
mounted () {
this.thumbsUpAni = new ThumbsUpAni()
}
}
</script>

4、附件

1、点赞的 canvas 文件:canvas.js
2、点赞的组件代码:ThumbUp.vue
3、点赞图标:thumb-up.png

以上

随笔标题:PC 和移动端实现长按效果

随笔作者:刘先玉

发布时间:2020年06月20日 - 14:26:02

最后更新:2020年06月20日 - 14:26:02

原文链接:https://liuxianyu.cn/article/long-press.html