?封裝組件：

<template><view class="zcPagination"><zc-u-toast></zc-u-toast><slot v-if="!loading && !list.length" name="emptyState"/><slot/><view class="loadState"><view v-if="loading" class="loading"><u-loading-icon text="加載中" color="#ccc" textColor="#ccc" size="13" textSize="13"></u-loading-icon></view><view v-else-if="nomore" class="nomore"><view class="spacer"></view><u--image width="18px" height="17px" src="/static/nomore.svg"></u--image><text style="color: #ccc;font-size: 13px;">到底啦！</text><view class="spacer"></view></view></view></view> </template><script>export default {props: {option: {type: Object,default: () => ({})},list: Array,getRemoteList: Function},data() {return {pageSize: this.option.pageSize,pageNo: this.option.pageNo,loading: false,nomore: false}},methods: {async refresh() {if(!this.list.length) returnconst pageSize = this.list.lengthconst pageNo = 1this.loading = trueconst res = await this.getRemoteList.call(this.$parent, { pageSize, pageNo })this.loading = falseif(res.status) {const list = res.datathis.$emit('update:list', list)if(res.total === list.length) this.nomore = trueelse this.nomore = false}else{this.$store.commit('uToast', { type: 'error', message: res.msg })}},async load() {const { pageSize, pageNo } = thisthis.loading = trueconst res = await this.getRemoteList.call(this.$parent, { pageSize, pageNo })this.loading = falseif(res.status) {this.pageNo++const list = this.list.concat(res.data)this.$emit('update:list', list)if(res.total === list.length) this.nomore = trueelse this.nomore = false}else{this.$store.commit('uToast', { type: 'error', message: res.msg })}}}} </script><style lang="scss" scoped> .zcPagination{.loadState{padding: 8px;.nomore{display: flex;justify-content: center;position: relative;.spacer{width: 60px;height: 2px;transform: translateY(8px);margin: 0 10px;background: linear-gradient(282deg, #CCCCCC 0%, transparent 100%);&:last-of-type{background: linear-gradient(282deg, transparent 0%, #CCCCCC 100%);}}text{margin-left: 10rpx;}}} }</style>

使用組件：

<template><view><zc-pagination ref="zcPagination" :option="{pageSize, pageNo}" :list.sync="list" :getRemoteList="getRemoteList"><zc-jobs v-for="(item, index) of list" :key="index" :item="item" :index="index"/><zc-empty slot="emptyState"/></zc-pagination></view> </template><script>export default {data() {return {pageSize: 14,pageNo: 1,list: []}},onShow() {// 刷新數據this.$refs['zcPagination'] && this.$refs['zcPagination'].refresh()},onReady() {this.$refs['zcPagination'].load()},onReachBottom() {this.$refs['zcPagination'].load()},methods: {getRemoteList({ pageSize, pageNo }) {const params = {title: '精裝修',pageNo,pageSize}return this.$store.dispatch('user/findJob', params)}}} </script>

這里是以uniapp+uview為例提供一個實現方式和思路，大家根據實際項目情況改動，如果是純H5使用其他list組件（如：vant-list、better-scroll等）可以判斷觸底事件的組件替代onReachBottom。

---

另外打個廣告，最近發現了一個很好用的扶墻工具，支持多種方案，很便宜很穩定：速蛙云

總結

以上是生活随笔為你收集整理的vue移动端下拉加载分页全面解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。