uniapp----010--uni中下拉刷新、上拉加载的学习

2022年8月5日 660点热度 0人点赞 0条评论

下拉刷新、上拉加载的学习

2、下拉刷新的学习

uni-app中有两种方式开启下拉刷新:

1)需要在 `pages.json` 里,找到的当前页面的pages节点,并在 `style` 选项中开启 `enablePullDownRefresh`

2)通过调用uni.startPullDownRefresh方法来开启下拉刷新

 

2.1 通过配置文件开启

 

图片

 

图片

 

图片

 

图片

 

图片

 

图片

图片

 

 

图片

 

图片

开启成功:

 

图片

页面生命周期函数中,onPullDownRefresh ,监听该页面用户下拉刷新事件。

监听:

 

图片

 

图片

 

图片

 

图片

 

图片

 

图片

 

图片

延迟2秒:

 

图片

 

图片

 

2.2 通过API开启

1)监听下拉刷新

2)关闭下拉刷新

 

图片

 

图片

 

图片

 

3、上拉加载

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

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

 

图片

 

图片

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

onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。

 

图片

 

pages.json/pages/style/onReachBottomDistance,默认50px 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期

 

图片

 

图片

 

图片

图片

 

图片

 

图片

 

80480uniapp----010--uni中下拉刷新、上拉加载的学习

这个人很懒,什么都没留下

文章评论