【记录】wepy框架小程序下拉刷新及上拉加载更多

网上看了很多自己试着写了下, 可以实现.
下拉刷新及上拉加载更多 这两个函数必须要写在onLoad生命周期同级别, 否则报错.

<!-- 上拉加载更多 -->
	<view wx:if='{{!loadingBox}}'>
		<view wx:if='{{moreLoading}}'>
			<image src="../../assets/icons/loading.svg" />
			<view>疯狂加载资源中</view>
		</view>
		<view wx:elif="{{!moreLoading}}">
			<text>没有内容了</text>
		</view>
	</view>




wepy框架 下拉刷新及 上拉加载更多
import wepy from 'wepy'
config = {
	"enablePullDownRefresh": true,  // 开启下拉功能
}
data = {
	tableData: [],
	total: 1,
	// 默认为1 即可, onLoad函数里再绑定
	current_page: 1,
	// 数据列表显示与隐藏
	isVisible: false,
	// 上拉加载
	loadingBox: false,
	moreLoading: false,
} 

在onLoad生命周期函数同级别下
// 下拉刷新
	onPullDownRefresh() {
		// 调用请求接口
		wepy.request({
			url: this.baseAPI + '/api/wechat/project',
			data: {
				token: this.token
			},
			method: 'GET',
			dataType: 'json',
			success: res => {
				if (res.data.code == 40000) {
				// 数据源绑定
					this.tableData = res.data.data.data
					// 条数
					this.total = res.data.data.total
					// 当前页码值
					this.current_page = res.data.data.current_page
					// 数据绑定成功, 显示数据列表
					this.isVisible = true
					this.$apply()
				} else {
					wepy.showToast({
						title: res.data.code + res.data.msg,
						icon: 'none',
						duration: 2000,
						mask: true
					})
				}
			}
		})
		// 延迟操作, 取消下拉动作
		const timer = setTimeout(()=>{
		// 终止下拉动作
			wepy.stopPullDownRefresh()
			clearTimeout(timer)
		},2000)
	}


// onLoad 生命周期  不可以用onShow 因为页面离开再进入还会初始化数据, 不友好, 建议onLoad
onLoad() {
		this.token = wepy.getStorageSync('token')
		this.baseAPI = wepy.$appConfig.baseURL
		this.$apply()
		wepy.request({
			url: this.baseAPI + '/api/wechat/project',
			data: {
				token: this.token
			},
			method: 'GET',
			dataType: 'json',
			success: res => {
				if (res.data.code == 40000) {
					this.tableData = res.data.data.data
					this.total = res.data.data.total
					this.current_page = res.data.data.current_page
					this.isVisible = true
					this.$apply()
				} else {
					wepy.showToast({
						title: res.data.code + res.data.msg,
						icon: 'none',
						duration: 2000,
						mask: true
					})
				}
			}
		})
	}


// 上拉加载更多
	onReachBottom () {
	if (this.loadingBox || this.moreLoading) {
      return
    } else {
    // 加载框 显示
			this.moreLoading = true
			// 这里的this.current_pag 根据你自己的页码值来定义 需要加1去请求接口
			// 我是在onLoad里就赋值了
			const page = this.current_page + 1
			wepy.request({
				url: this.baseAPI + '/api/wechat/project?page=' + page,
				data: {
					token: this.token
				},
				method: 'GET',
				dataType: 'json',
				success: res => {
					console.log('上拉成功', res)
					if (res.data.code == 40000) {
					// 绑定页码值
						this.current_page = res.data.data.current_page
						// 绑定条数
						this.total = res.data.data.total
						// 这里的tableData数组是onLoad拿过来的
						const oldData = this.tableData;
						// 这里用concat数组方法合并数组 不改变原数组
						this.tableData = oldData.concat(res.data.data.data)
						this.isVisible = true
						this.$apply()
						// 定时器需要主动清除
						const timer = setTimeout(()=>{
						// 加载盒子隐藏, 对应上面的取反操作, 显示 '没有更多内容' 盒子
							this.moreLoading = false
							this.$apply()
							clearTimeout(timer)
						},2000)
					} else {
						wepy.showToast({
							title: res.data.code + res.data.msg,
							icon: 'none',
							duration: 2000,
							mask: true
						})
					}
				}
			})
		}
	}