横屏做了一个登陆页面,结果发现页面布局不同。
具体如下:
当首次启动真机调试时,页面显示如第一个图,比例失衡。
当修改代码保存刷新时,基座自动更新,这时候页面显示如第二个图,比例正常。
每次首次启动都会比例失衡,这是怎么回事啊,如何解决。
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>
1***@qq.com (作者)
最新版本,在华为p50 pro和雷电模拟器上都是这样
2023-02-22 18:35
DCloud_UNI_Anne
回复 1***@qq.com: 可直接运行就复现的最小化demo,上传附件,不要贴在评论区。
2023-02-22 20:13