app点击上一页下一页组件

### uni-app 中实现 App 的上一页和下一页功能 在uni-app框架中，通过Vue.js开发的应用可以利用路由管理来实现在不同页面之间的导航。对于“上一页”和“下一页”的操作，主要依赖于`uni.navigateTo()`、`uni.redirectTo()`等API来进行页面跳转[^1]。 为了更优雅地处理这种场景，在实际项目里通常会创建一个专门用于控制分页逻辑的组件。该组件内部维护当前所在页码，并提供接口供外部调用以改变这个状态。当点击“上一页”或“下一页”按钮时，则相应调整页码并触发数据请求更新视图显示内容[^2]。 #### 创建分页器组件 `Pagination.vue` ```html <template> <view class="pagination"> <button @click="prevPage">上一页</button> {{ currentPage }} / {{ totalPages }} <button @click="nextPage">下一页</button> </view> </template> <script> export default { props: ['totalPages'], data() { return { currentPage: 1, }; }, methods: { nextPage() { if (this.currentPage < this.totalPages) { this.currentPage++; this.$emit('pageChange', this.currentPage); } }, prevPage() { if (this.currentPage > 1) { this.currentPage--; this.$emit('pageChange', this.currentPage); } }, }, }; </script> ``` 在这个例子中定义了一个简单的分页控件，它接收总页数作为属性并通过事件通知父组件何时发生了翻页动作。每当用户按下任一方向键时都会检查边界条件再执行对应的逻辑[^3]。 #### 使用分页器组件 假设有一个商品列表页面需要展示多页的数据： ```html <!-- GoodsList.vue --> <template> <view> <!-- 商品列表项... --> <pagination :total-pages="totalPages" @pageChange="handlePageChange"></pagination> </view> </template> <script> import Pagination from './components/Pagination'; export default { components: { Pagination }, data() { return { queryObj: { pagenum: 1, pagesize: 10, }, totalPages: Math.ceil(totalCount / pageSize), totalCount: 0, // 总记录条目数量 }; }, onLoad(options) { // 初始化加载第一页数据... }, methods: { handlePageChange(pageNum) { this.queryObj.pagenum = pageNum; this.fetchData(); }, async fetchData() { try { const res = await someApiCall(this.queryObj); // 假设这是获取远程数据的方法 this.totalCount = res.data.total; // 更新总条目数以便计算总页数 this.totalPages = Math.ceil(res.data.total / this.queryObj.pagesize); // 处理返回的商品列表数据... } catch (error) { console.error(error.message); } }, }, }; </script> ``` 这里展示了如何在一个具体的业务场景——即商品列表查询中集成上述提到的分页组件。每次发生翻页时都会重新发起网络请求并将结果呈现给用户[^4]。