仿小米全面屏边缘返回

最近小米miui10即将上线，一直想使用手势边缘返回功能，使用小米Note3刷了miui10后，却发现没有全面屏手势操作！！

在浏览某应用的时候，发现了它也采用了类似小米的返回功能，所以这里，也用vue自己写了一个。

Demo地址

功能需求：
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()
    }
}

关注我，查看更多分享