【学习随记】Gyro，Btn，filters

<template><div class="gyro"><!-- 陀螺仪 --><ul class="gyroWrap"><!-- <li>设备是否提供绝对定位(absolute)数据: {{absolute}}</li> --><!-- <li>设备沿z轴(alpha)上的旋转角度: {{alpha}}</li> --><li>设备在x轴(beta)上的旋转角度: {{beta}}</li><!-- <li>设备在y轴(gamma)上的旋转角度: {{gamma}}</li> --><li>上个值/当前值：<span v-for="(item,index) in remArr" :key="index" style="color:magenta">{{item}}&nbsp;|&nbsp;</span></li><li>当前手机向<span style="background: lime;">-- {{phoneArrow}} --</span>侧倾斜</li></ul><!-- 按钮 --><!-- @click="scale(item, index)" --><ul class="btnWrap" ref="btnClick"><li  v-for="(item, index) in btnList"@click="index == 0 ? scale1(item, index) : scale2(item, index) ":class="effectLeft == true && curIndex == index ? 'active' :(effectRight == true && curIndex == index ? 'active' : '') ">{{item.name}}</li></ul><!-- 蒙版 --><!-- <div class="mask" v-if="maskState"><button @click="closePage()">BACK</button></div> --><ul class="gyroWrap"><li v-for="(item,index) in classList"class="li-default":class="classList | addBtnClass(index)">{{classList | addBtnClass(index) + ' -- filters add -- '}}</li></ul></div>
</template>
<script>
export default {data(){return {btnList: [{name: '左',},{name: '右'}],// absolute: '',// alpha: '0',beta: '0',// gamma: '0',remArr: [], // 测试 查看符合的最后两项值phoneArrow: '0', // 测试 当前手机向那边倾斜// 蒙版maskState: true,// 按钮 添加动效curIndex: 0,effectLeft: false,clickStateLeft: true,effectRight: false,clickStateRight: true,//测试 添加类名classList: ['left','right','up','down']}},filters: {// add classaddBtnClass(list, index){// console.log("addBtnClass index", list, index);let classRe = 'li-';if(index == 0){return classRe + 'left'}else if(index == 1){return classRe + 'right'}else if(index == 2){return classRe + 'up'}else if(index == 3){return classRe + 'down'}},},methods: {scale(item, index){let that = this;that.curIndex = index;if(index==0){// console.log("Left");if(that.clickStateLeft){that.clickStateLeft = false;that.effectLeft = !that.effectLeft;setTimeout(()=>{that.effectLeft = !that.effectLeft;that.clickStateLeft = true;console.log("Left 动画结束了");},80);}else{console.log("Left 还没执行完成，不能继续");return;}}else if(index==1){// console.log("Right");if(that.clickStateRight){that.clickStateRight = false;   // 防止连续点击按钮that.effectRight = !that.effectRight;setTimeout(()=>{that.effectRight = !that.effectRight;that.clickStateRight = true;console.log("Right 动画结束了");},80);}else{console.log("Right 还没执行完成，不能继续");return;}}console.log("scale");},scale1(item, index){let that = this;that.curIndex = index;if(!that.clickStateLeft) {console.log("Left 还没执行完成，不能继续");return;}that.clickStateLeft = false;that.effectLeft = !that.effectLeft;setTimeout(()=>{that.effectLeft = !that.effectLeft;that.clickStateLeft = true;console.log("Left 动画结束了");},35);},scale2(item, index){let that = this;that.curIndex = index;if(!that.clickStateRight) {console.log("Right 还没执行完成，不能继续");return;}that.effectRight = !that.effectRight;that.clickStateRight = false;   // 防止连续点击按钮setTimeout(()=>{that.effectRight = !that.effectRight;that.clickStateRight = true;   // 防止连续点击按钮console.log("Right 动画结束了");},35);},// 关闭蒙版closePage(){this.maskState = false;// WeixinJSBridge.call('closeWindow');// document.addEventListener('WeixinJSBridgeReady', function(){ WeixinJSBridge.call('closeWindow'); }, false)},// 获取手机陀螺仪参数getGyro(){let that = this;if (window.DeviceOrientationEvent) {console.log("你的手机支持陀螺仪");let sensitiveDeg = 30;   // 灵敏度（晃动手机的角度值）let allBeta = [0];  // 用于记录所有符合发送消息的参数值let lastBeta = [];  // 用于记录符合参数中的最后两项（上一个值和当前的值）let beta;   // 当前陀螺仪x轴的参数let countL = 0;let countR = 0;window.addEventListener('deviceorientation', function(e){beta = parseInt(e.beta);    // x轴的参数，保留整数that.beta = beta; // 测试 页面中查看 当前参数值// 符合记录条件：1、处于x轴0度位置；2、每晃动角度变化达到设置的灵敏度；3、在控制的角度范围之内（这里设置：0至-75和0-75范围内）if(beta == 0 || (beta % sensitiveDeg == 0 && ((beta < 0 && beta >= -75) || (beta > 0 && beta <= 75) ))){allBeta.push(beta); // 每次符合就记录到数组lastBeta = allBeta.slice(allBeta.length-2, allBeta.length );    // 每记录到新的参数，就更新记录的最后两项值that.remArr = lastBeta;console.log("最后两项：", lastBeta);let prevBeta = lastBeta[0]; // 上一个值let curBeta = lastBeta[1];  // 当前值if(curBeta > prevBeta){// 当前值大于上一值，手机正在向右倾斜countL++that.phoneArrow = "右-" + countL;console.log("当前项 大于 > 上一项", curBeta + ">" + prevBeta, countL);}else if(curBeta < prevBeta){// 当前值小于上一值，手机正在向左倾斜countR++that.phoneArrow = "左-" + countR;console.log("当前项 小于 < 上一项", curBeta + "<" + prevBeta, countR);}else if(curBeta == prevBeta){// 当前值与上一值一样，手机晃动幅度不大,未达到敏感值，无需发送指令}}});} else {console.log("你的手机--不--支持陀螺仪");}},},mounted(){console.log("hello  Gyro");this.getGyro();// let oUl = this.$refs.btnClick// console.log(oUl);// oUl.addEventListener('click', (event)=>{//     event = event || window.event;//     var target = event.target || event.srcElement;//     if(target.nodeName == 'LI'){//         console.log("class",event, target);//     }// }, false)}
}
</script><style type="text/css" scoped>.gyro{padding-top: .15rem;
}/* 按钮 */
.btnWrap{display: flex;justify-content: space-around;margin-bottom: .5rem;
}
.btnWrap li{width: 2.5rem;height: 2.5rem;line-height: 2.5rem;font-size: .5rem;color: #ccc;text-align: center;border: .01rem solid lime;border-radius: 50%;/* background: url(../assets/imgs/01.jpg); */
}
.btnWrap .active{/* transform: scale(0.9); */animation: effect 35ms linear;}@keyframes effect {0% {transform: scale(1);}50% {transform: scale(.9);}100% {transform: scale(1);}
}/* 蒙版 */
.mask{display: flex;justify-content: center;align-items: center;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 90;background: rgba(0,0,0,.5);
}button{width: 60%;line-height: 1rem;text-align: center;font-size: .38rem;color: #fff;border: #fff .03rem solid ;border-radius: 1rem;background: none;outline: none;
}/* 陀螺仪 */.gyroWrap{width: 6.9rem;margin: 0 auto .5rem;text-align: left;border: .01rem solid #ccc;border-bottom: none;
}.gyroWrap li{box-sizing: border-box;line-height: .7rem;padding: 0 .3rem;border-bottom: .01rem solid #ccc;
}</style>

【学习随记】Gyro，Btn，filters_addClass相关推荐

微擎学习随记_常用功能实现
微擎学习随记_常用功能实现消息通知: 代码位置: addons/项目名/core/model/notice.php(设置微信信息通知和微信模板消息通知) 需求: 店铺得到收益之后以消息的形式通知店铺 ...
基于Tomcat的MQ学习月记
基于Tomcat的MQ学习月记 JAVA实现简单MQ队列服务主要角色流程顺序项目构建流程具体使用流程代码演示客户端执行生产消费信息包(AppClient) 消息中心服务(CenterSer ...
我的 C 语言学习生涯记——纪念 Dennis M. Ritchie
我的 C 语言学习生涯记--纪念 Dennis M. Ritchie (本文应 gaobo 要求而写,以纪念我们永远的 Dennis M. Ritchie 老师) 让我把时间的车轮倒转,回到 1998 ...
HID Relay, 有线键盘转蓝牙项目学习：记一次失败的尝试
HID Relay, 有线键盘转蓝牙项目学习:记一次失败的尝试开始学习嵌入式后,最难受的一个点在于电脑端口不够.我的电脑有两个USB口一个TypeC口,鼠标和键盘都要插USB口,stm32和51也都 ...
DO-178B三种文本对照学习注记
DO-178B三种文本对照学习注记 1. 引言本文汇总了对英文版DO-178B.法文版ED-12B和中文版HB/Z295-96进行对照学习时所做的注记.这三种文本是: 英文版:RTCA ...
golang web学习随便记3-响应有关
http.ResponseWriter接口前一篇中的例子已经"庞大",我们这篇将编写新的例子来学习服务器的响应和cookie.在看例子代码之前,我们先来看handler fun ...
ipad上有哪些好用的学习和记笔记的软件？
Goodnotes goodnote是ipad上的一款非常优秀的笔记软件,goodnote像一个自由的笔记本一样,可以让你像在纸张上一样的书写效果.并且支持可以插入非常丰富的媒体文件,但是goodno ...
python爬取js加载的数据_Python爬虫学习，记一次抓包获取js，从js函数中取数据的过程...
昨天有小伙伴找我,新浪新闻的国内新闻页,其他部分都是静态网页可以抓到,但是在左下方的最新新闻部分,不是静态网页,也没有json数据,让我帮忙抓一下.大概看了下,是js加载的,而且数据在js函数中,很有 ...
学习笔记-记ActiveMQ学习摘录与心得（一）
这两天在看开源的MQ技术,趁着晚上安静,把这两天学的东西摘录下.在公司学东西效率真心捉鸡,心里总觉得别扭,拿了公司的钱不干活还在那学习,表示心情不淡定,效率不行啊...晚上时间是我的,下班还是蛮开心的 ...
阿里巴巴虾米的机器学习与深度学习进阶记
20世纪70年代初,一名名叫Geoffrey Hinton的英国研究生开始制作简单的数学模型,来描述人脑中的神经元是如何直观地理解世界的.被称为人工神经网络的技术几十年来一直被认为是不切实际的.但是在 ...

【学习随记】Gyro，Btn，filters_addClass

【学习随记】Gyro，Btn，filters_addClass相关推荐

最新文章

热门文章