uni-app：触底事件使用

需求：需要滑到底部，加载更多数据，不想使用分页组件，实现触底加载

解决方法：使用页面滚动到底部的事件onReachBottom()

1.在项目的pages.json文件找到需要添加触底事件的页面，添加onReachBottomDistance（页面底部的触发距离）

{
"path": "pages/personal-center/wallet-detail", // 页面路径
"style": {
"navigationBarTitleText": "全部明细",
"navigationBarBackgroundColor": "#fff",
"enablePullDownRefresh": false, // 是否开启下拉刷新
"onReachBottomDistance": 50   // （滚动页面到距离底部50px时，就会触发onReachBottom事件）
         }
}

2.在页面调用onReachBottom()

// 触底事件 - 上拉加载
onReachBottom() {
// 加判断： 页码数 * 每一页获取数据的条数 >= 总条数，如果符合条件说明数据已经全部加载完毕
if (this.form.pageNum*this.form.pageSize >= this.total) {
    this.status = "noMore"
    return
} else{
  this.status = "loading"  
  this.form.pageNum++   // 每触发一次触底事件，页码加1
  this.getDetail() // 请求接口，获取数据  
}
}

完整代码如下：

<template>
	<view class="wallet-detail">
		<view class="center-center" v-if="list.length >0">
			<view class="center-item" v-for="(item,index) in list" :key="index">
				<view class="item-left">
					<view class="left-title">
					  <span>{{item.financialType == 0?'收入':'支出'}}</span>
					</view>
					<view class="left-time">
						{{item.createTime}}
					</view>
				</view>
				<view class="item-right">
					<view class="right-num">
						￥{{item.amount}}
					</view>
					<view class="right-total">
						余额:￥{{item.accountBalance}}
					</view>
				</view>
			</view>
				<uni-load-more :status="status" />
		</view>
        <!-- 无数据时展示 -->
		<view v-else class="empty">
			<image style="width: 570rpx;height: 200rpx;" 
         src="无数据的图片路径"
				mode="aspectFill"></image>
			<view class="empty-text" style="font-size: 24rpx;color: #999;">
				暂无明细
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					pageNum: 1, 
					pageSize: 20
				},
				total: 0,
				list: [],
				status: 'more' // 初始状态为"更多"
			}
		},
		created() {
			this.getDetail()
		},
		methods: {
			// 请求接口,查询明细
			getDetail() {
			this.status = this.form.pageNum*this.form.pageSize >= this.total ? 
            'noMore' : 'more'
				this.$http.post('请求接口地址', {
					pageNum: this.form.pageNum,
					pageSize: this.form.pageSize
				}).then(res => {
					if (res.code == 200) {						
						if (this.form.pageNum == 1) {
							this.list = res.data.rows
							this.total = res.data.total
						} else {
							var list1 = res.data.rows
							this.list = [...this.list, ...list1]
						}
					}
				})
			},

		},
		// 触底事件 - 上拉加载
		onReachBottom() {
			// 加判断： 页码数 * 每一页获取数据的条数 >= 总条数，如果符合条件说明数据已经全部加载完毕
			if (this.form.pageNum*this.form.pageSize >= this.total) {
			this.status = "noMore"
			 return
			} else {
				this.status = "loading" 
				this.form.pageNum++   // 每触发一次触底事件，页码加1
				this.getDetail()
			}
			
		}
	}
</script>

<style lang="less" scoped>
	
</style>