使用scroll-view 组件包裹元素,为页面底部添加正在加载动画,可以使用组件 uLi-load-more,直接点击 使用HBuilder 导入插件,可以不用引入和注册该组件,但 HBuilderX版本应高于2.5.5
// lower-threshold 距离底部 30 触发事件
<scroll-view class="orderlist" scroll-y="true" lower-threshold="30" @scrolltolower="scrollLower">
<view class="" style="height: 70rpx;">元素</view>
// 加载动画组件
<uLi-load-more status="loading"></uLi-load-more>
</scroll-view>
data(){
return{
page:1, // 第一页
allpage:0, // 总页数
status:"loading" // 加载状态
}
}
方法
scrollLower(){
if(this.page>=this.allpage){
this.status="noMore"
return ;
}else{
this.status="loading"
}
this.page++
this.getData();
console.log('我滚动到底部了')
}
滚动高度
<style>
.orderlist{
position: absolute;
bottom: 0;top:70rpx;
width: 100%;
}
</style>