自適配高度
自定義的頂部導航欄，可參考博文
https://blog.csdn.net/weixin_41192489/article/details/134852124
如圖可見，在頁面滾動過程中，頂部導航欄和底欄未動，僅中間的內容區域可滾動。
- 整個頁面的高度設置為 100%，并采用 flex 布局
- 滾動區域的高度，通過flex布局的flex-grow實現自適配
<template><!-- 頂部--自定義的導航欄 --><CustomNavbar /><!-- 中間--自適配高度的滾動區 --><scroll-view scroll-y class="contentBox"><!-- 此處省略了頁面內容的相關代碼 --></scroll-view>
</template>
<style lang="scss">
page {background-color: #f7f7f7;// 總容器高度撐滿屏幕height: 100%;// 使容器內元素使用flex布局display: flex;flex-direction: column;
}
.contentBox {// 滾動區自適配高度flex-grow: 1;
}
</style>
- 注意事項：此處樣式不能加 scoped
下拉刷新
在 scroll-view 標簽上新增
refresher-enabled@refresherrefresh="onRefresherrefresh":refresher-triggered="isTriggered"
js中新增
// 控制下拉刷新動畫的顯隱
const isTriggered = ref(false)
// 自定義下拉刷新被觸發
const onRefresherrefresh = async () => {// 開啟下拉刷新動畫isTriggered.value = true// 重置子組件（猜你喜歡）分頁相關數據（頁碼重置為1，清空列表，結束標記重置為false）guessRef.value?.resetData()// 加載數據--所有接口同時開始刷新，直到耗時最長的接口返回數據await Promise.all([getSwiperInfo(), getCategoryInfo(), guessRef.value?.getGuessList()])// 關閉下拉刷新動畫isTriggered.value = false
}
