在使用微信小程序时避免不了查询列表实现分页功能，在这里分享下使用croll-view实现上拉加载下拉刷新功能,如有不足请指出

• 创建commonPagination组件
  • wxml文件

<scroll-view class="scroll" style="{{style}}" scroll-top="{{scrollTop}}" scroll-y="true" refresher-enabled="{{true}}" bindrefresherrefresh="onPullDown" refresher-triggered="{{triggered}}" lower-threshold="{{50}}" bindscrolltolower="onPullUp"><!-- 列表区 --><slot></slot><!-- 上拉加载 --><view class="loadmore" hidden="{{!isLoadMoreing}}"><view class="loadmore-icon"></view><view class="loadmore-tips">正在加载</view></view><!-- 我是底线 --><view wx:if="{{isNoMore}}" class="bot-line">我是有底线的</view>
</scroll-view>

• wxss文件

.scroll {width: 100%;height: 100%;}
.scroll ::-webkit-scrollbar {width: 0;height: 0;color: transparent;display: none;
}.loadmore {width: 100%;height: 100rpx;display: flex;align-items: center;justify-content: center;font-size: 14px;
}.loadmore-tips {vertical-align: middle;
}.loadmore-icon {margin: 0 5px;width: 20px;height: 20px;vertical-align: middle;-webkit-animation: weuiLoading 1s steps(12, end) infinite;animation: weuiLoading 1s steps(12, end) infinite;background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;background-size: 100%;
}.bot-line {color: #333;height: 100rpx;line-height: 100rpx;white-space: nowrap;text-align: center;
}
.bot-line::before,
.bot-line::after {content: "";display: inline-block;width: 24vw;height: 1rpx;background-color: #ddd;vertical-align: super;margin: 0 36rpx;}

• js文件

Component({/*** 组件的属性列表*/properties: {style: {type: String,value: ''},_freshing: {type: Boolean,value: false},_loadMoreing: {type: Boolean,value: false},isLoadMoreing: {type: Boolean,value: false,observer: function (newVal) { console.log(newVal)}},isNoMore: {type: Boolean,value: false},triggered: {type: Boolean,value: false}},/*** 组件的初始数据*/data: {scrollTop: 0,},/*** 组件的方法列表*/methods: {// 下拉刷新onPullDown(e) {this.triggerEvent('PullDown')},// 上拉加载onPullUp(e) {this.triggerEvent('PullUp')},}
})

• json文件

{"usingComponents": {},"component": true
}

• 页面引用
  • wxml文件

  <view  class="box history-box">
<pagination bind:PullUp="handlePullUp" bind:PullDown="handlePullDown" _freshing="{{_freshing}}" _loadMoreing="{{_loadMoreing}}" isNoMore="{{isNoMore}}" triggered="{{triggered}}" isLoadMoreing="{{isLoadMoreing}}"><view class="history-content-box" wx:for="{{historyList}}" wx:key="unique"><view>{{item.name}}</view> </view></pagination></view>

• wxss文件

.box {height: 70vh;position: absolute;bottom: 0;left: 0;width: 100%;background: rgba(240, 240, 240, 0.5);backdrop-filter: blur(27.1828px);border-radius: 40rpx 40rpx 0 0;padding: 20rpx 50rpx;box-sizing: border-box;
}
.history-box {padding-top: 60rpx;backdrop-filter: inherit;background: rgba(215, 227, 235, 1);
}
.history-content-box {width: 100%;height: fit-content;padding: 20rpx;background-color: #fff;border-radius: 20rpx;box-sizing: border-box;margin-bottom: 30rpx;}

• js文件

// index.js
// 获取应用实例
const app = getApp()
import {request
} from '../../utils/request'Page({data: {_freshing: false,_loadMoreing: false,isNoMore: false,triggered: false,isLoadMoreing: false,pageIndex: 1,pageSize: 10,historyList:[]},onLoad(option) {this.setData({pageIndex: 1,historyList:[]})this.getList()},handlePullUp() {if (this.data._loadMoreing || this.data.isNoMore) return;this.setData({isLoadMoreing: true,isNoMore: false,pageIndex: this.data.pageIndex + 1,_loadMoreing: true// pageIndex: res.length == 0 ? this.data.pageIndex : this.data.pageIndex + 1})this.getList('up')},handlePullDown() {if (this.data._freshing) return;this._freshing = truethis.setData({_freshing: true,pageIndex: 1,isNoMore: false,triggered: true})this.getList('down')},getList(type) {let paramsData = {pageIndex: this.data.pageIndex,pageSize: 10}if(this.data.pageIndex == 1) {this.setData({historyList: []})}request("url", paramsData, "get").then(res => {console.log(res,'klklkl')let recordList = res.recordList || []let list = this.data.historyListthis.setData({historyList: list.concat(recordList)})console.log(this.data.historyList)if(type=='up') {this.setData({isLoadMoreing: false,_loadMoreing: false})} else {this.setData({_freshing: false,pageIndex: 1,isNoMore: false,triggered: false})}if(this.data.pageIndex == res.pageCount) {this.setData({isNoMore: true})} else {this.setData({isNoMore: false})}}).catch(error => {if (error === 401) {app.initLogin()}})}})

• json文件

{"usingComponents": {"pagination":"/components/commonPagination/index"},"navigationStyle": "custom"
}