如果优美地实现加载更多

Posted on Edited on

如果优美地实现加载更多

前言

在小程序或者原生app开发的时候，为了更好的体验，需要翻页的列表往往在触底的时候需要显示加载中，在没有数据后显示没有更多了。

分析

  1. 一直在底部显示”加载中”，但是在视窗范围内看不到，在触底的时候发起翻页请求（此时可以看到”加载中”），等数据返回后，将”加载中”顶到最下面。
  2. 判断count数和list长度相等时隐藏”加载中”，显示”没有更多了”，并且不再请求

实现

假设后端返回的数据结构为：

1
2
3
4
5
6
7
{
  code: 1001,
  result: {
    count: 37,
    items: [...]
  }
}

以小程序为例，我们全局声明变量

1
2
3
4
5
6
data: {
  list: [], // 列表
  currentPage: 0, // 当前页
  count: 0, // 列表总数
  pageLoading: false, // 控制页面laoding的变量
},

在wxml结构中：

1
2
3
4
5
6
<view wx:if="{{ list.length !== count && !pageLoading }}" class="loading-text">
  正在加载<dot>...</dot>
</view>
<view wx:if="{{ list.length === count && !pageLoading }}" class="no-more-text">
  没有更多了~
</view>

在js中的逻辑：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
async onLoad() {
  this.setData({
    pageLoading: true,
  })
  await this.goPage()
  this.setData({
    pageLoading: false,
  })
},
goPage() {
  return new Promise(async (resolve) => {
    const res = await axios.get('/users', {
      page: this.currentPage,
      pageSize: 10,
    })
    if (res.code !== 1001) {
      resolve(false)
    }
    this.setData({
      list: this.data.list.contact(res.result.items || []),
      count: res.result.count,
    })
    resolve()
  })
},
onReachBottom() {
  if (this.data.list.length === this.data.count) return // 没有更多后不再请求
  this.setData({
    currentPage: this.data.currentPage + 1,
  })
  this.goPage() // 执行请求，page参数使用currentPage
},

wxss部分，点点点的动效：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 加载更多 点点点的动效 */
dot {
  display: inline-block; 
  height: 1em;
  line-height: 1;
  text-align: left;
  vertical-align: -.25em;
  overflow: hidden;
}
dot::before {
  display: block;
  content: '...\A..\A.\A';
  white-space: pre-wrap;   /* 也可以是white-space: pre */
  animation: dot 2s infinite step-start both;
}
@keyframes dot {
  25% { transform: translateY(-3em); }
  50% { transform: translateY(-2em); }
  75% { transform: translateY(-1em); }
}

css特效参考自张鑫旭的博客：

CSS3 animation渐进实现点点点等待提示效果