传送门：https://blog.csdn.net/Panda_m/article/details/57515195
入门的demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Vue --> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <style> b { font-size: 24px; } </style> <body> <div id="app"> <p>alpha(z): 手机在水平面上旋转的角度，当设备的顶部指向正北时其值为 0°。 当设备逆时针旋转时值增加。【0 -360】: <b>{{ alpha }}</b></p> <p>beta(x): 围绕x轴上下翻转的角度，当设备的顶部和底部与地球表面等距时其值为 0。【向上翻为负值，-180 - 180】: <b>{{ beta }}</b></p> <p>gamma(y): 围绕y轴左右翻转的角度，当设备的左侧和右侧与地球表面等距时 其值为 0。【向左翻为负值， -180 - 180】: <b>{{ gamma }}</b></p> </div> </body> <script> var vue = new Vue({ el: '#app', data: { alpha: "", beta: "", gamma: "", }, beforeMount: function () { window.addEventListener('deviceorientation', (orientData) => { this.alpha = orientData.alpha || 'null'; this.beta = orientData.beta || 'null'; this.gamma = orientData.gamma || 'null'; }); } }) </script> </html>
展示效果：
节流版demo（强烈推荐）：
事件触发的太快，频繁的触发函数与界面渲染太浪费性能，这里我演示函数节流，参数为1000ms
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Vue --> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <style> b { font-size: 24px; } </style> <body> <div id="app"> <p>alpha(z): 手机在水平面上旋转的角度，当设备的顶部指向正北时其值为 0°。 当设备逆时针旋转时值增加。【0 -360】: <b>{{ alpha }}</b></p> <p>beta(x): 围绕x轴上下翻转的角度，当设备的顶部和底部与地球表面等距时其值为 0。【向上翻为负值，-180 - 180】: <b>{{ beta }}</b></p> <p>gamma(y): 围绕y轴左右翻转的角度，当设备的左侧和右侧与地球表面等距时 其值为 0。【向左翻为负值， -180 - 180】: <b>{{ gamma }}</b></p> </div> </body> <script> // 函数节流（throttle） var throttle = function(func, wait, options) { var timeout, context, args, result; // 标记时间戳 var previous = 0; // options可选属性 leading: true/false 表示第一次事件马上触发回调/等待wait时间后触发 // options可选属性 trailing: true/false 表示最后一次回调触发/最后一次回调不触发 if (!options) options = {}; var later = function() { previous = options.leading === false ? 0 : +(new Date()); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; var throttled = function() { // 记录当前时间戳 var now = +(new Date()); // 如果是第一次触发且选项设置不立即执行回调 if (!previous && options.leading === false) // 将记录的上次执行的时间戳置为当前 previous = now; // 距离下次触发回调还需等待的时间 var remaining = wait - (now - previous); context = this; args = arguments; // 等待时间 <= 0或者不科学地 > wait（异常情况） if (remaining <= 0 || remaining > wait) { if (timeout) { // 清除定时器 clearTimeout(timeout); // 解除引用 timeout = null; } // 将记录的上次执行的时间戳置为当前 previous = now; // 触发回调 result = func.apply(context, args); if (!timeout) context = args = null; } // 在定时器不存在且选项设置最后一次触发需要执行回调的情况下 // 设置定时器，间隔remaining时间后执行later else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } return result; }; throttled.cancel = function() { clearTimeout(timeout); previous = 0; timeout = context = args = null; }; return throttled; }; var vue = new Vue({ el: '#app', data: { alpha: "", beta: "", gamma: "", }, methods: { render (orientData) { this.alpha = orientData.alpha || 'null'; this.beta = orientData.beta || 'null'; this.gamma = orientData.gamma || 'null'; } }, beforeMount: function () { const throttle_render = throttle(this.render, 1000); window.addEventListener('deviceorientation', throttle_render); } }) </script> </html>
