uniapp滑动底部刷新和一键返回顶部

### 实现滑动底部自动刷新和点击按钮回到页面顶部 #### 滑动到底部触发刷新功能 为了实现在 UniApp 应用中当用户滚动到页面最底端时触发加载更多数据的功能，可以通过监听 `onReachBottom` 生命周期方法来实现。此方法会在页面触底事件发生时被调用。 ```javascript export default { data() { return { isLoading: false, hasMoreData: true, dataList: [] }; }, onReachBottom() { if (this.isLoading || !this.hasMoreData) return; this.loadData(); }, methods: { loadData() { this.isLoading = true; setTimeout(() => { const newData = Array.from({ length: 10 }).map((_, index) => 'Item ' + (dataList.length + index) ); this.dataList.push(...newData); this.isLoading = false; // 假设这是最后一次加载，则关闭hasMoreData标志位 if (/* 判断条件 */) { this.hasMoreData = false; } }, 1000); //模拟网络请求延迟 } } } ``` 上述代码展示了如何利用 `onReachBottom()` 来检测用户的滚动行为并发起新的数据获取操作[^1]。 #### 添加一键返回顶部按钮 对于提供给用户快速返回页面顶端的能力，在页面布局内加入一个固定定位的按钮，并绑定点击事件处理程序用于执行页面回滚动作： ```html <template> <!-- 页面其他内容 --> <view class="back-to-top-btn" @click="scrollToTop"> 返回顶部 ^ </view> </template> <script> methods: { scrollToTop() { uni.pageScrollTo({ scrollTop: 0, duration: 300 }); } } </script> <style scoped> .back-to-top-btn { position: fixed; bottom: 20rpx; /* 可调整 */ right: 20rpx; /* 可调整 */ padding: 15rpx; background-color: rgba(0, 0, 0, .7); color: white; border-radius: 50%; z-index: 999; } </style> ``` 这里定义了一个名为 `.back-to-top-btn` 的样式类，它会创建一个小圆圈作为视觉提示；同时设置了相应的 JavaScript 函数 `scrollToTop()` ，该函数内部调用了 `uni.pageScrollTo()` API 将视窗平滑地移动至文档开头处。