我这个是自定义header、main、和footer的布局，是盒子中的上拉加载、下拉刷新，不是页面的，废话不说，直接上代码！

<template><view class="assembly"><u-navbar title="个人中心" @leftClick="leftClick" :autoBack="true"></u-navbar><view class="main"><scroll-viewscroll-yclass="scrollbox"@scrolltolower="lower"refresher-enabled="true":refresher-triggered="trigger"@refresherrefresh="refresherrefresh"show-scrollbar="false"><textstyle="line-height: 40px; display: block"v-for="(item, index) in 20">{{ index }}</text><view class="loading-wrap"><view class="loading-text" v-if="loadingFlag == 1">数据加载中...</view><view class="loading-text" v-if="loadingFlag == 2">没有更多的数据...</view></view></scroll-view></view><view class="footer-bar"></view></view>
</template>
<script>
export default {data() {return {trigger: false,loadingFlag: 1,};},methods: {leftClick() {console.log("返回上一页");},// 上拉加载lower() {console.log("触底加载11");},// 下拉刷新refresherrefresh() {const _that = this;this.trigger = true;setTimeout(() => {_that.trigger = false;}, 3000);},},
};
</script>
<style lang="scss">
.assembly {width: 100vw;height: 100vh;// 头部返回::v-deep .u-navbar {height: 50px;}// 内容.main {width: 100%;height: calc(100vh - 50px - 50px);background-color: pink;overflow: auto;// 这个是scroll-view的盒子样式，必须要有，要不然不会触发 触底滚动事件.scrollbox {width: 100%;height: 100%;}// 加载更多.loading-wrap {width: 100%;height: 30px;background-color: yellow;.loading-text {font-size: $uni-size-loading-text;text-align: center;line-height: 30px;}}}// 页脚.footer-bar {width: 100%;height: 50px;background-color: red;position: fixed;bottom: 0;right: 0;}
}
</style>