在使用微信小程序时避免不了查询列表实现分页功能,在这里分享下使用croll-view实现上拉加载下拉刷新功能,如有不足请指出
<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>
.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;
}
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')
},
}
})
{
"usingComponents": {},
"component": true
}
<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>
.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;
}
// 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 = true
this.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.historyList
this.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()
}
})
}
})
{
"usingComponents": {
"pagination":"/components/commonPagination/index"
},
"navigationStyle": "custom"
}