uniapp中的scroll-view 用于设置可滚动视图区域。
- 利用scroll-view包裹可滚动区域
- 页面设置高度100%
- 滚动区域设置flex:1
<template>
<CustomNavbar />
<scroll-view
class="scall-view"
refresher-enabled
:refresher-triggered="isTriggered"
@refresherrefresh="toUpperChange"
scroll-y="true"
@scrolltolower="tolowerChange"
>
<Skeleton v-if="isLoading"/>
<template v-else>
<XtxSwipper :list="bannerList" />
<CategoryPanel :list="mutilList" />
<HotMutli :list="hostMutliList" />
<XtxGuess ref="guessRef"/>
</template>
</scroll-view>
</template>
<style lang="scss">
page {
background-color: #F7F7F7;
height: 100vh;
display: flex;
flex-direction: column;
}
.scall-view {
flex: 1;
height: 100%
}
</style>
如果滚动内容单独设置flex:1局部滚动不生效,可以加个height高