【学习随记】Gyro，Btn，filters_addClass

<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 class
        addBtnClass(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>