uniapp中onReachBottomDistance属性的使用

关于uniapp中onReachBottomDistance在pages.json中的有什么作用一直搞不清楚,通过一个案例让我们来了解它的用处。

代码:

	"style": {
			"onReachBottomDistance":100,
			"navigationBarTitleText": "购物车",
			"enablePullDownRefresh": true,
			"app-plus":{
				"pullToRefresh": {
					"support": true,
					"color": "#fa436a",
					"style": "default"
				}
			}
<template>
	
	<view class="cartWrap">购物车页面呀!!!!!</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		onReachBottom(){//页面上拉触底事件的处理函数
			console.log("用户把这个页面上拉100时触发我的")
		}
	}
</script>

<style >
	.cartWrap{
		height:900px;
	}
</style>

**注意:**在这里页面的高度一定大于可视高度,可以理解为要出现滚动条。这样页面的onReachBottom事件才会触发。希望通过这个案例大家对uniapp中配置onReachBottomDistance的用处有了一定的了解

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp实现上拉加载更多可以使用onReachBottomDistance属性。这个属性是在页面设置的,表示当距离页面底部多少距离时触发上拉加载更多的事件。 具体实现步骤如下: 1. 在页面的配置项添加onReachBottomDistance属性,设置触发距离,例如:onReachBottomDistance="50",表示当距离页面底部50像素时触发上拉加载更多事件。 2. 在页面的methods定义上拉加载更多的事件处理函数,例如: ``` onLoadMore() { // 加载更多数据 } ``` 3. 在页面监听onReachBottom事件,当触发时调用上拉加载更多的事件处理函数,例如: ``` onReachBottom() { this.onLoadMore(); } ``` 完整的示例代码如下: ``` <template> <view> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </view> </template> <script> export default { data() { return { list: [], page: 1, pageSize: 10 }; }, methods: { onLoadMore() { // 模拟异步请求数据 setTimeout(() => { for (let i = 0; i < this.pageSize; i++) { this.list.push(`Item ${this.list.length + 1}`); } this.page++; }, 1000); } }, onReachBottom() { this.onLoadMore(); }, onReady() { this.onLoadMore(); } }; </script> <style> ul { margin: 0; padding: 0; list-style: none; } li { padding: 10px; border-bottom: 1px solid #ccc; } </style> ``` 在这个示例,通过模拟异步请求数据来实现上拉加载更多,每次请求返回10条数据。在页面加载完成时,会触发onReady事件,调用onLoadMore方法加载第一页数据。当用户滑动到距离页面底部50像素时,会触发onReachBottom事件,调用onLoadMore方法加载下一页数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值