uni-app 横屏切换时页面偶尔出现白屏
uni-app 横屏切换时页面偶尔出现白屏
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | Windows 11家庭中文版21H2 | HBuilderX |
操作步骤
来回点击底部铝掌柜进入退出偶尔出现白屏
预期结果
来回点击底部铝掌柜进入退出偶尔不出现白屏
实际结果
来回点击底部铝掌柜进入退出偶尔出现白屏
bug描述：
//首页跳转至横屏页面组件
<template>
<view class="tabContent" :style="'padding-bottom:'+aniosgaodu+'rpx;'">
<block v-for="(item, index) in list" :key="index" class="tabBlockItem">
<view class="navigator" :class="current == index ? 'on' : ''" @tap="switchTab(item.pagePath, index)">
<view class="icon">
<image class="icon" :class="{icon3:index==3,icon2:index==2,icon1:index==1}"
:src="current == index ? item.selectedIconPath : item.iconPath" alt="" />
</view>
<view :class="current == index ? 'tintColor' : 'color'">{{ item.text }}</view>
</view>
</block>
</view>
</template>
<script>
import {
refreshToken
} from '@/api/login.js'
export default {
data() {
return {
dots: true,
list: [{
pagePath: '/pages/home/index',
iconPath: '/static/image/icon/sy_wx@2x.png',
selectedIconPath: '/static/image/icon/sy_yx@2x.png',
text: '首页'
},
{
pagePath: '/pages/guodu/index',
iconPath: '/static/image/icon/dash_jx@2x.png',
selectedIconPath: '/static/image/icon/dash_xx@2x.png',
text: '铝掌柜'
},
{
pagePath: '/pages/information/index',
iconPath: '/static/image/icon/zixun_a@2x.png',
selectedIconPath: '/static/image/icon/zixun_b@2x.png',
text: '资讯'
},
{
pagePath: '/pages/report/index',
iconPath: '/static/image/icon/baoga_a@2x.png',
selectedIconPath: '/static/image/icon/baoga_b@2x.png',
text: '报告'
},
{
pagePath: '/pages/exponent/index',
iconPath: '/static/image/icon/zhishu_a@2x.png',
selectedIconPath: '/static/image/icon/zhishu_b@2x.png',
text: '指数'
},
{
pagePath: '/pages/meeting/index',
iconPath: '/static/image/icon/huiy_a@2x.png',
selectedIconPath: '/static/image/icon/huiy_b@2x.png',
text: '会议'
}
],
page: '',
aniosgaodu: ''
};
},
props: {
current: {
type: [Number],
default: 0
}
},
created() {},
mounted() {
// uni.setStorageSync('tar_key', true)
var that = this;
// 获取手机系统信息
uni.getSystemInfo({
success: function(res) {
// 判断手机是否为苹果手机
var a = res.model.split(' ');
if (a[0] == 'iPhone') {
// 苹果手机标题栏高度为38
that.aniosgaodu = 38;
} else {
// 其他手机标题栏高度为0
that.aniosgaodu = 0;
}
// 状态栏高度+标题栏高度
}
});
},
methods: {
resetToken(token, pagePath) {
console.log('-------', token);
// refreshToken({
// token: token
// }).then(r => {
plus.screen.lockOrientation('landscape-primary'); //锁定横屏
plus.navigator.setFullscreen(true); //隐藏状态栏(应用全屏:只能隐藏状态栏,标题栏和虚拟返回键都还可以显示)
uni.navigateTo({
url: pagePath
})
// })
},
switchTab(pagePath, index) {
let isToEchart = uni.getStorageSync('isToEchart')
if (index == 1) {
if (isToEchart === true) {
return;
}
let token = uni.getStorageSync('token')
if (token) {
uni.setStorageSync('isToEchart', true)
// this.resetToken(token, pagePath)
plus.screen.lockOrientation('landscape-primary'); //锁定横屏
plus.navigator.setFullscreen(true); //隐藏状态栏(应用全屏:只能隐藏状态栏,标题栏和虚拟返回键都还可以显示)
uni.navigateTo({
url: pagePath,
complete() {
uni.setStorageSync('isToEchart', false)
}
})
} else {
uni.navigateTo({
url: '/pages/login/index'
})
}
return
}
uni.redirectTo({
url: pagePath
});
}
}
};
</script>
<template>
<view class="pasye">
过渡页
</view>
</template>
<script>
export default {
data() {
return {
info: ''
}
},
onLoad(op) {
this.info = op.info
},
methods: {
toHome() {
var that = this;
plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
plus.navigator.setFullscreen(false); //隐藏状态栏(应用全屏:只能隐藏状态栏,标题栏和虚拟返回键都还可以显示)
console.log('首页')
setTimeout(() => {
uni.reLaunch({
url: "/pages/home/index",
animationDuration: 0,
})
}, 50)
},
toEchart() {
var that = this;
plus.screen.lockOrientation('landscape-primary'); //锁定横屏
plus.navigator.setFullscreen(true); //隐藏状态栏(应用全屏:只能隐藏状态栏,标题栏和虚拟返回键都还可以显示)
setTimeout(() => {
console.log('跳转图表');
uni.reLaunch({
url: "/pages/echartScreen/index",
animationDuration: 0,
})
}, 50)
},
goLogin() {
var that = this;
plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
plus.navigator.setFullscreen(false); //隐藏状态栏(应用全屏:只能隐藏状态栏,标题栏和虚拟返回键都还可以显示)
console.log('登录')
setTimeout(() => {
uni.reLaunch({
url: "/pages/login/index",
animationDuration: 0,
})
}, 50)
uni.hideLoading()
}
},
onShow() {
console.log(this.info)
if (this.info == 1) {
this.toHome()
} else if (this.info == '123') {
this.goLogin()
} else {
this.toEchart()
}
},
}
</script> 横屏页面铝掌柜
onBackPress(res) {
// 【安卓】禁止左滑、物理返回
return res.from === 'backbutton'
},
created() {
console.log('echartcreated');
// #ifdef APP-PLUS
let pages = getCurrentPages();
let page = pages[pages.length - 1];
let currentWebview = page.$getAppWebview()
currentWebview.setStyle({
popGesture: 'none'
})
// #endif
this.getTreeList()
},
mounted() {
const query = uni.createSelectorQuery().in(this).select('.home');
query.boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("节点离页面顶部的距离为" + data.top);
}).exec();
query.fields({
size: true,
scrollOffset: true,
context: true
}, data => {
console.log("得到节点信息" + JSON.stringify(data));
console.log("节点的宽为" + data.width);
}).exec();
console.log('echartmounted');
},
onUnload() {
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary');
// #endif
console.log('echartonUnload');
},
onShow() {
console.log('echartsonShow');
},
1 回复
实际上横竖屏的切换是需要时间的，可以加个节流事件，单位时间比如1s切换才生效，也可以在监听页面返回时切换
onUnload改为
onBackPress(e) {
plus.screen.lockOrientation(‘portrait-primary’);
}
