前言

• Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）
• 关于怎么拉：对于下拉还是上拉我是分不清的（不管叫下拉还是上拉，都应该有参照物的。在不说参照物的前提下，叫上拉也行，叫下拉也行。）按照uniapp的说法叫下拉下一页数据。为了避免怎么拉的困境，本文叫做页面触底加载更多。

如何实现

uniapp 内置提供了名为 onReachBottom 的页面生命周期函数。该函数可以实现页面触底加载更多的功能。

页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项。

注意事项

如果用 scroll-view 组件时，这个方法不起作用，请按照 scroll-view 组件的页面触底加载更多的方法处理。
此种情况下，去uniapp的插件市场搜索其它方法。

定义页面底部的触发距离

可在pages.json里定义某个页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"onReachBottonDistance":50    // 距离底部50px时，触发onReachBottom事件
			}
		},
		...
	]

onReachBottom 函数

index.vue

<script>
	export default {
		components: {
		},
		data() {
			return {
			}
		},
		async onLoad(options) {
			console.log("onLoad")
		},
		onReady(){
		},
		async onReachBottom() {
			console.log("onReachBottom");
		},
		methods: {
		}
	}
</script>

参考

https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f