1***@qq.com
1***@qq.com
  • 发布:2023-02-22 16:38
  • 更新:2023-02-24 18:44
  • 阅读:127

横屏bug

分类:uni-app

横屏做了一个登陆页面,结果发现页面布局不同。
具体如下:

当首次启动真机调试时,页面显示如第一个图,比例失衡。
当修改代码保存刷新时,基座自动更新,这时候页面显示如第二个图,比例正常。

每次首次启动都会比例失衡,这是怎么回事啊,如何解决。

2023-02-22 16:38 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

HBuilderX哪个版本?能否提供最小化复现示例(上传附件)并说明相关环境复现机型【咨询问题/bug处理优先级规则】:https://ask.dcloud.net.cn/article/38139

  • 1***@qq.com (作者)

    最新版本,在华为p50 pro和雷电模拟器上都是这样

    2023-02-22 18:35

  • DCloud_UNI_Anne

    回复 1***@qq.com: 可直接运行就复现的最小化demo,上传附件,不要贴在评论区。

    2023-02-22 20:13

1***@qq.com

1***@qq.com (作者)

<template>  
    <view class="main-block" :style="'height:'+this.screenX+'rpx','width:'+this.screenY+'rpx'" @touchmove.stop.prevent="MoveHandle()" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">  
        <view class="load-block" :animation="animationData1" :style="'margin-top:'+this.LoadBlock+'rpx'">  
            <view class="load-title">登录</view>  
            <input class="load-input1" confirm-type="done" @input="Input1()" v-model="LoadText1" maxlength="15" type="text" placeholder=" 请输入账号"/>  
            <input class="load-input2" confirm-type="done" maxlength="15" v-model="LoadText2" password type="safe-password" placeholder=" 请输入密码"/>  
            <view class="load-btns">  
                <view class="load-btn1" @tap="LoadOff">取消</view>  
                <view class="load-btn2" @tap="LoadIn">登录</view>  
            </view>  
        </view>  
        <view class="tip-block" :animation="animationData2" :style="'margin-top:'+this.tipblock+'rpx'">  
            <view class="tip-title">{{tip}}</view>  
        </view>  

    </view>  

</template>  

<script>  
    export default {  
        data() {  
            return {  
                screenX:'',//屏幕长宽  
                screenY:'',  

                startData:{//触摸滑动  
                    clientX:'',  
                    clientY:'',  
                },  
                startX:'',  
                startY:'',  
                like_state:'',  
                moveX:0,  
                moveY:0,  

                isLoad:false,//登陆窗口  
                LoadBlock:'',  
                LoadText1:'',  
                LoadText2:'',  

                istip:false,//提示窗口  
                tip:'',  
                tipblock:'',  

                animationData1: {},//动画1  
                animationData2: {},//动画1  

            }  
        },  
        onLoad() {  
            let getWindowInfo = uni.getWindowInfo();  
            this.screenX = getWindowInfo.screenHeight;  
            this.screenY = getWindowInfo.screenWidth;  
            console.log('屏幕高度:'+getWindowInfo.screenHeight);  
            console.log('屏幕宽度:'+getWindowInfo.screenWidth);  
            this.LoadBlock = getWindowInfo.screenHeight/2-100;  
            this.tipblock = -300;  
            plus.screen.lockOrientation('landscape-primary');  
        },  
        onShow() {  
            var animation = uni.createAnimation({  
              duration: 1000,  
              timingFunction: "ease",  
            })  
            this.animation = animation;  
            this.animation.translate(0,this.screenY).step({ duration: 600 });  
            this.animationData1 = this.animation.export();  

            this.animation.translate(0,-100).step({ duration: 600 });  
            this.animationData2 = this.animation.export();  
        },  
        onUnload() {  
            plus.screen.lockOrientation('portrait-primary');  
        },  
        methods: {  
            StartTouch(e){  
                this.startData.clientX = e.changedTouches[0].clientX;  
                this.startData.clientY = e.changedTouches[0].clientY;  
            },  
            touchStart(event) {  
                this.startX = event.touches[0].pageX;  
                this.startY = event.touches[0].pageY;  
                console.log('开始触摸:', this.startX, this.startY);  
            },  
            touchMove(event) {  
            var currentX = event.touches[0].pageX;  
            var currentY = event.touches[0].pageY;  
            var moveX = currentX - this.startX;  
            var moveY = currentY - this.startY;  
            var text = '';  
            var state = 0; //-1:左滑,0:没滑动,1:右滑  
                // //左右方向滑动  
            if (Math.abs(moveX) > Math.abs(moveY)) {  
                if (moveX < -10) {  
                    text = '左滑';  
                    state = 1;  
                } else if (moveX > 10) {  
                    text = '右滑';  
                    state = -1;  
                }  
            } else { //上下方向滑动  
                if (moveY < 0) {  
                    text = '上滑';  
                } else if (moveY > 0) text = '下滑';  
            }  
            this.like_state = state;  
            this.moveX = moveX;  
            this.moveY = moveY;  
            console.log('开始滑动:', this.moveX, this.moveY, this.like_state);  
            },  
            touchEnd(event) {  
                this.LoadOn();  
                console.log('移动距离:'+Math.abs(this.moveX));  
                if(this.startX<=50 && this.moveX>=50){    
                    //this.Animation_modeRX();  
                    this.moveX = 0;  
                }  
                if(this.startX>50){  
                    //this.Animation_SwiperUser();  
                    //this.Animation_modeLX();  
                }  
            },  
            MoveHandle(){  
                return;  
            },  
            Animation1: function () {  
                if(this.isLoad ==true){  
                    this.animation.translate(0,0).step({ duration: 500 });  
                    this.animationData1 = this.animation.export();  
                }  
                else{  
                    this.animation.translate(0,this.screenY).step({ duration: 500 });  
                    this.animationData1 = this.animation.export();  
                }  
            },  
            Animation2: function () {  
                if(this.istip ==true){  
                    this.animation.translate(0,28).step({ duration: 500 });  
                    this.animationData2 = this.animation.export();  
                }  
                else{  
                    this.animation.translate(0,-100).step({ duration: 500 });  
                    this.animationData2 = this.animation.export();  
                }  
            },  
            LoadOn(){  
                this.isLoad = true;  
                this.Animation1();  
            },  
            LoadOff(){  
                this.isLoad = false;  
                this.Animation1();  
            },  
            Input1(){  
                if(this.LoadText1.substring(0,this.LoadText1.length)!=' '&& this.LoadText1.length==1){  
                    this.LoadText1 = ' '+this.LoadText1;  
                }  
                if(this.LoadText1.substring(0,this.LoadText1.length)==' ' && this.LoadText1.length==1){  
                    this.LoadText1 = '';  
                }  
            },  
            LoadIn(){  
                if(this.LoadText1 == "" || this.LoadText2 == ""){  
                    setTimeout(()=>{  
                        this.istip = false;   
                        this.Animation2();  
                    },2000)  
                    this.tip ='账号或密码不可空缺'  
                    this.istip = true;  
                    this.Animation2();  
                }  
                else{  
                    setTimeout(()=>{  
                        this.istip = false;       
                        this.Animation2();  
                    },2000)  
                    this.tip ='欢迎进入'  
                    this.istip = true;  
                    this.Animation2();  
                }  
            }  
        }  
    }  
</script>  

<style>  
    .main-block{  
        background-color: #ffdec1;  
        border-radius: 10rpx;  
        border:5px solid rgb(129, 129, 129);  
    }  
    .load-block{  
        height: 200rpx;  
        width: 400rpx;  
        background-color: #ffffff;  
        border-radius: 10rpx;  
        border:5px solid rgb(129, 129, 129);  
        margin-left: auto;  
        margin-right: auto;  
    }  
    .load-title{  
        font-size: 30rpx;  
        text-align: center;  
    }  
    .load-input1{  
        height: 35rpx;  
        width: 300rpx;  
        margin-left: auto;  
        margin-right: auto;  
        border-radius: 10rpx;  
        border:5px solid rgb(129, 129, 129);  
    }  
    .load-input2{  
        margin-top: 5rpx;  
        height: 35rpx;  
        width: 300rpx;  
        margin-left: auto;  
        margin-right: auto;  
        border-radius: 10rpx;  
        border:5px solid rgb(129, 129, 129);  
    }  
    .load-btns{  
        margin-top: 10rpx;  
        text-align: center;  
        font-size: 23rpx;  
        display: flex;  
        flex-flow: row nowrap;  
        justify-content: space-between;  
    }  
    .load-btn1{  
        height: 35rpx;  
        width: 100rpx;  
        margin-left: auto;  
        margin-right: auto;  
        border-radius: 10rpx;  
        border:5px solid rgb(129, 129, 129);  
    }  
    .load-btn2{  

        height: 35rpx;  
        width: 100rpx;  
        margin-left: auto;  
        margin-right: auto;  
        border-radius: 10rpx;  
        border:5px solid rgb(129, 129, 129);  
    }  
    .tip-block{  
        height: 35rpx;  
        width: 600rpx;  
        background-color: #ffffff;  
        border-radius: 10rpx;  
        border:5px solid rgb(129, 129, 129);  
        margin-left: auto;  
        margin-right: auto;  
    }  
    .tip-title{  
        font-size: 20rpx;  
        text-align: center;  
    }  
</style>  

要回复问题请先登录注册