uniapp项目的下拉刷新(day6)

125 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第14天,点击查看活动详情

Snipaste_2022-09-28_08-38-26.png

上一篇文章中我们介绍了一下文章列表的样式布局以及文字超出多少行显示省略号这个css常用技巧还介绍了点击文字跳转到详情页的注意事项,接下来我们将介绍app项目中以及小程序项目中常用的onreachbottom以及onPullDownRefresh,分别是触底的时候执行的方法以及下拉刷新的时候执行的方法

  • 下拉刷新

在我们日常使用app或者小程序的时候经常会使用到下拉刷新和上拉加载更多,所以在uniapp的官方文档中也为我们介绍了这两个api,官网文档的链接:uniapp.dcloud.net.cn/api/ui/pull… , 当我们需要为这个页面开启下拉刷新的时候我们需要在pages.json文件中对这个页面进行如下的配置:

image.png

即开启enablepulldownrefresh ,这样这个页面下拉之后就会出现一个小图标显示在刷新了。我们会发现像今日头条下拉刷新之后可以加载新的数据,所以我们可以在 onPullDownRefresh() {}函数中执行另一个函数,就是获取数据的函数,this.getNewsData,这样当下拉刷新的这个圈圈转完了之后我们页面上就会出现一些新的文章,大大提高了用户的体验感,具体的实现代码如下所示:

onPullDownRefresh() {
  this.getNewsData()
  },

为了让下拉刷新更加明显我们可以设置一个延时器,让圈圈转两秒再执行获取数据的方法,延时器的代码如下所示:

setTimeout(function () {
      uni.startPullDownRefresh();
    }, 2000);

在延时器里面执行其他方法可能会涉及到this的指向问题,可以在script标签下面令that = this