uni-app上拉加载

uni-app上拉加载

  1).通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px。

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
				"path" : "pages/pull-up/pull-up",
				"style" :                                                                                    
				{
						"navigationBarTitleText": "",
						"enablePullDownRefresh": false,
						"onReachBottomDistance": 120
				}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
		],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

  2).通过onReachBottom监听到触底的行为

<template>
	<view>
		<view v-for="(item, index) in list" :key="index" class="box-item">
			{{item}}
		</view>
	</view>
</template>

<script>
   export default {
		data() {
			return {
				list: ['java', '前端', '微服务', '大数据', '大数据1', '大数据2', '大数据3', '大数据4', '大数据5', '大数据6', '大数据7', '大数据8', '大数据9', '大数据10']
			}
		},
		onReachBottom () {
		  console.log('触底了');
			this.list = [...this.list, ...['大数据11', '大数据12', '大数据13', '大数据14', '大数据15', '大数据16', '大数据17', '大数据16', '大数据18']]
		},
		methods: {  
		}
	}
</script>

<style>
	.box-item {
		height: 100px;
		line-height: 100px;
	}
</style>

  效果如下：