页面第一次打开抖动

追赶星辰

本帖最后由追赶星辰于 2024-4-27 23:35 编辑

这是我的一个首页，然后我要向左滑动一点到设备那边，会发现设备那边是白的，不是和首页那样的顶部有背景（实际上是有的），然后点击切换到设备那边的时候会发现页面抖动了一下，也就是从全白变成了有东西。这要怎么解决。

至高吾·尚

应该是你那个页面有下拉刷新机制，你页面刚开始空白，应该是没有触发获取数据逻辑，导致页面没有加载数据，所以是空屏。后来页面抖动一下，然后有的内容，应该就是触发了刷新机制，加载数据，页面渲染了数据内容。
你可以根据我上面的逻辑分析，去调整你的代码逻辑，比如在监听滑动，然后判断是哪个页面，再去使用代码主动调取该页面的刷新机制即可。

追赶星辰

至高吾·尚 · 2024-4-28 08:15应该是你那个页面有下拉刷新机制，你页面刚开始空白，应该是没有触发获取数据逻辑，导致页面没有加载数据，所以是空屏。后来页面抖动一下，然后有的内容，应该就是触发了刷新机制，加载数据，页面渲染了数据内容。
...

设备那边是有下拉刷新机制的，但是其他的页面没有，就是从首页点击其他的三个页面的时候，会有抖动效果（消息和我的页面是没有加载数据的）

追赶星辰

至高吾·尚 · 2024-4-28 08:15应该是你那个页面有下拉刷新机制，你页面刚开始空白，应该是没有触发获取数据逻辑，导致页面没有加载数据，所以是空屏。后来页面抖动一下，然后有的内容，应该就是触发了刷新机制，加载数据，页面渲染了数据内容。
...

现在可以了，有时候会卡bug，昨晚不行，今天早上就可以了。设备那个就和您说的一样。其他的没问题了。

追赶星辰

至高吾·尚 · 2024-4-28 08:15应该是你那个页面有下拉刷新机制，你页面刚开始空白，应该是没有触发获取数据逻辑，导致页面没有加载数据，所以是空屏。后来页面抖动一下，然后有的内容，应该就是触发了刷新机制，加载数据，页面渲染了数据内容。
...

很奇怪，现在又不行了，这个是我的这个页面的代码

<template>
<safe-area class="page">
<sticky class="top">
<text class="top-title">我的</text>
</sticky>
<view class="main"></view>
</safe-area>
</template>
<script>
export default {
name: 'my',
apiready(){//like created
//是否沉浸式显示页面（false的话会显示手机状态栏）
api.setFullScreen({
fullScreen: false,
})
//设置状态栏颜色（深色、浅色）
api.setStatusBarStyle({
style: 'light'
});
},
data() {
return{
}
},
methods: {
}
}
</script>
<style>
.main{
/*让白色部分占据剩余区域，父容器的布局默认为纵轴的flex布局,所以这个直接生效*/
flex: 1;
background-color: white;
}
.page {
height: 100%;
background-color: #25292e;
}
.top{
height: 2.5rem;
text-align: center;
justify-content: center;
}
.top-title{
color: white;
font-weight: 500;
}
</style>

复制代码

追赶星辰

至高吾·尚 · 2024-4-28 08:15应该是你那个页面有下拉刷新机制，你页面刚开始空白，应该是没有触发获取数据逻辑，导致页面没有加载数据，所以是空屏。后来页面抖动一下，然后有的内容，应该就是触发了刷新机制，加载数据，页面渲染了数据内容。
...

会不会是safe-area元素的问题，我把safe-area换成view就可以了，但是我想要一种手机状态栏不会覆盖页面内容的效果。怎样做个改动

至高吾·尚

你反馈的「又不行了」具体是哪里不OK了，把具体的现象和你期望达到的效果都清楚的描述一下

追赶星辰

至高吾·尚 · 2024-4-28 13:28你反馈的「又不行了」具体是哪里不OK了，把具体的现象和你期望达到的效果都清楚的描述一下

就是我希望的是点击“我的”的时候页面不抖动，就这样，但是现在还是会抖动（现象：就是上面的那个标题会闪以下才出现，就是刚开始的全白的，然后出现标题），而且“我的”那个页面是没有数据加载的，代码在上面。这些情况都排除了，还会是什么原因。

至高吾·尚

你切换到「我的」页面时，是如何控制页面自动刷新出数据的，那块的逻辑代码贴一下

追赶星辰

至高吾·尚 · 2024-4-28 15:53你切换到「我的」页面时，是如何控制页面自动刷新出数据的，那块的逻辑代码贴一下

“我的”页面中没有数据。
代码：

<template>
<safe-area class="page">
<sticky class="top">
<text class="top-title">我的</text>
</sticky>
<view class="main"></view>
</safe-area>
</template>
<script>
export default {
name: 'my',
apiready(){//like created
//是否沉浸式显示页面（false的话会显示手机状态栏）
api.setFullScreen({
fullScreen: false,
})
//设置状态栏颜色（深色、浅色）
api.setStatusBarStyle({
style: 'light'
});
},
data() {
return{
}
},
methods: {
}
}
</script>
<style>
.main{
/*让白色部分占据剩余区域，父容器的布局默认为纵轴的flex布局,所以这个直接生效*/
flex: 1;
background-color: white;
}
.page {
height: 100%;
background-color: #25292e;
}
.top{
height: 2.5rem;
text-align: center;
justify-content: center;
}
.top-title{
color: white;
font-weight: 500;
}
</style>

复制代码

[YonStudio] 页面第一次打开抖动