微信小程序图片在视频上运动,触边反弹,全屏可用

    data() {
            return {
                theWidth: null, //可视最大宽
                theHeight: null, //可视最大高
                thex: 0, //动态x 
                they: 0, //动态y 
                speed:50, //X运动速度
                speed2:50, //Y运动速度
                ee:null, //全屏事件对象
            }





move(){
                this.timer = setInterval(()=>{
                this.thex = this.thex + this.speed;
                this.they = this.they + this.speed2;
                
                    if(this.thex >= this.theWidth){               
                        this.thex = this.theWidth;
                        this.speed = -this.speed;
                    }else if(this.thex <= 0){
                        this.thex = 0;
                        this.speed = -this.speed;
                    };
                    
                    if(this.they >= this.theHeight){
                        this.they = this.theHeight;
                        this.speed2 = -this.speed2;
                    }else if(this.they <= 0){
                        this.they = 0;
                        this.speed2 = -this.speed2;
                    }    
                },1000)
            },

screenChange(e){//全屏与退出全屏都要重新获取可视宽高
            this.ee = e;
            setTimeout(()=>{
                console.log("全屏或者退出全屏!!!");
                let getWindowInfo = uni.getWindowInfo();
                console.log("getWindowInfo=>",getWindowInfo);
                this.maxWidth = getWindowInfo.windowWidth;
                this.maxHeight = getWindowInfo.windowHeight;
                this.theWidth = (this.maxWidth * 2) - 160;
                console.log("this.theWidth=>", this.theWidth);
                this.theHeight = (this.maxHeight * 2) - 160;
                console.log("this.theHeight=>", this.theHeight);
                if(this.ee.detail.fullscreen == true){
                    this.showMenu = false;
                    console.log("全屏");
                }else if(this.ee.detail.fullscreen == false){
                    this.showMenu = true;
                    console.log("非全屏");
                }
            },1000)
                
            },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值