uniapp小程序之上拉加载,下拉刷新

上拉加载:

首先要在pages.json里面找到需要上拉的页面,在style属性里面写上 "onReachBottomDistance":160

(距离底部160时触发上拉onReachBottom() 函数) 

图片

然后在该页面的methods里面写  onReachBottom() 方法

在这个函数里面写数据的添加逻辑,例如给页面数据数组push数据

图片

此时,当页面向上拖动的时候,距离底部160时就会触发onReachBottom()函数,打印出 “触底”

图片

下拉刷新:

先在pages.json里面开启该页面的下拉刷新。默认就有,只需要把false改成true即可开启该页面的下拉功能。

图片

此时你下拉页面就有下拉的图标出现。

图片

然后在该页面的methods里面写一个下拉函数 onPullDownRefresh() 

延时器是1秒后关闭下拉图标,在关闭下拉图标之前,即uni.stopPullDownRefresh(); 这一句的前面写更新数据的逻辑

图片

也可以在下拉过程中增加一些效果,例如导航栏加载中效果,提示下拉成功效果等,这些效果就是一个方法,官网都有拷贝过来就行

图片

图片

小总结:

两个效果,都先要在pages.json里面开启对应的效果,然后在该页面的methods里面写对应的api方法即可,这些方法在官网都有,可直接拷贝,最后添加自己的数据即可。

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

「已注销」

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值