uniapp小程序项目,swiper的swiper-item里面使用了scroll-view页面加载时跳屏怎么解决
时间: 2024-01-05 07:04:55 浏览: 142
微信小程序图片轮播及滚动视图
在 swiper-item 中使用 scroll-view 会导致页面加载时出现跳屏的情况,这是因为 swiper-item 的默认高度是 0,而 scroll-view 的默认高度是 100%,当 scroll-view 加载完成后会根据内容自适应高度,导致页面跳动。为了避免这种情况,你可以在 swiper-item 中设置一个固定的高度,或者在 scroll-view 内容加载前显示一个占位符,等加载完成后再显示 scroll-view。
例如,在 swiper-item 中设置一个固定高度:
```
<swiper-item>
<view style="height: 200px;">
<scroll-view style="height: 100%;" scroll-y="true">
<!-- scroll-view 内容 -->
</scroll-view>
</view>
</swiper-item>
```
或者使用 vue 的 v-if 指令实现占位符:
```
<swiper-item>
<view v-if="!loaded" style="height: 200px;"></view>
<scroll-view v-else style="height: 100%;" scroll-y="true">
<!-- scroll-view 内容 -->
</scroll-view>
</swiper-item>
```
其中,loaded 表示 scroll-view 内容是否已经加载完成。你可以在 scroll-view 的 onReady 事件中设置 loaded 为 true,表示内容已经加载完成。
阅读全文