最近小米miui10即将上线，一直想使用手势边缘返回功能，使用小米Note3刷了miui10后，却发现没有全面屏手势操作！！
在浏览某应用的时候，发现了它也采用了类似小米的返回功能，所以这里，也用vue自己写了一个。
功能需求：
1、要从屏幕边缘向右滑动，其他地方不管用
2、上下滑动时，箭头跟随
3、向右划出，逐渐突起，从透明变不透明，剪头角度变化
4、划出一定范围后松开触发返回，没达到范围不触发。
事件监听
这里主要监听touch事件，通过touchstart来判断，是否是从边缘滑入的;
通过touchmove监听向右滑入的幅度，以及上下移动的位置；
然后通过touchend监听停止滑动时的位置，触发返回动作。
主要代码如下：
window.addEventListener('touchstart', this.touchstart)
window.addEventListener('touchmove', this.touchmove)
window.addEventListener('touchend', this.touchend)
相关方法
// 获取坐标
getXY(event) {
let touch = event.touches[0]
this.x = touch.clientX
this.y = touch.clientY
},
touchstart(event) {
this.getXY(event)
// 判断是否是边缘滑动
if (this.x < 30) {
this.show = true
this.render()
} else {
this.show = false
}
},
touchmove(event) {
this.getXY(event)
this.render()
},
touchend() {
// 判断停止时的位置偏移
if (this.x > 90 && this.show) {
this.$router.go(-1)
}
this.x = 0
this.show = false
},
事件是相对比较简单的，接下来是使用canvas来画边缘样式。
边缘样式及动画
边缘效果
Html
<template>
<canvas id="arrows" class="arrows" :style="style"></canvas>
</template>
Css
.arrows {
position: fixed;
width: 30px;
height: 210px;
left: -2px;
}
Js
computed: {
// 样式计算属性
style() {
return {
top: this.y - 100 + 'px', // 跟随上下移动
display: this.show ? 'block' : 'none'
}
}
},
mounted() {
let canvas = document.getElementById('arrows')
canvas.width = 30
canvas.height = 210
this.context = canvas.getContext('2d')
},
methods:{
render() {
let x = this.x / 3
if (x > 25) {
x = 25
}
let n = ~~(x / 5)
// 获取颜色透明度
let color = `rgba(30,30,30,${x / 25})`
// 清空画布
this.context.clearRect(0, 0, 30, 210)
this.context.fillStyle = color
this.context.beginPath()
this.context.moveTo(0, 0)
// 贝塞尔曲线,划出弧度
this.context.bezierCurveTo(5, 70, x, 70, x, 100)
this.context.moveTo(x, 100)
this.context.bezierCurveTo(x, 140, 5, 140, 0, 210)
this.context.lineTo(0, 0)
this.context.fill()
// 箭头
this.context.moveTo(2 * n, 93)
this.context.lineTo(3 * n, 100)
this.context.lineTo(2 * n, 107)
this.context.lineWidth = 2
this.context.strokeStyle = '#fff'
this.context.stroke()
}
}
关注我，查看更多分享
