载入数据的时候，我们可以显示一个加载动画，提示用户小程序正在加载数据 ..

先打开这个仓库地址 .. ninghao 的 wxapp-spinkit ..

打开 pages .. spinkit ..

然后打开这个 bounce3.wxss .. 它里面是一些样式 .. 复制一下 .. 回到项目 .. 可以把这些样式先放在 app.wxss 这个样式表里 ...

再回到这个仓库 .. 打开这个 bounce3.wxml .. 复制一下里面的内容 .. 这个是动画小图标需要用到的组件结构 ..

再回到我们的项目 .. 可以去定义一个模板 .. 放在项目的 templates 目录的下面 .. 名字可以是 spinner.wxml ..

一组 template .. name 是模板的名字 .. 可以叫它 spinnner ..

里面先添加一组 block .. 上面加上一个 wx:if 根据 isLoading 这个数据的值来判断是否要显示一些东西 ..

里面包装的就是刚才我们复制的组件代码结构 ..

找个地方可以用一下这个模板 .. 打开首页的视图 .. 先导入模板文件 .. import ，src 的值是文件的位置 .. /templates/spinner.wxml ..

然后在这个视图文件的底部，用一下 template .. is 设置一下要使用的模板的名字 .. 这里就是 spinner .. data 可以设置传递给模板的数据 .. 添加一个 isLoading ..

再打开页面的主逻辑 .. 在它的 data 里面，添加一个 isLoading .. 先让它等于 true ...

预览

现在页面上会一直显示一个加载动画 ... 在这个 onLoad 里面，请求回来数据以后，我们可以设置一下页面上的 isLoading 的值，把它设置成 false ，这样数据加载完成以后，页面上的动画小图标就不会再显示了 ..

onReachBottom

再处理一下 onReachBottom .. 判断当前还有要显示的页面以后，用一下 this.setData .. 把 isLoading 设置成 true .. 重新显示加载动画 ..

然后在下面的 request 成功回调里 .. 再把 isLoading 的值设置成 false ..

这样滚动到页面底部，如果还有要加载显示的内容 .. 就会显示一个动画加载小图标 .. 成功请求回来数据以后 .. 又会把这个小图标隐藏起来 ..

有个地方我们还得再改一下 ..

回到页面的逻辑文件 ... 找到 onReachBottom .. 这里做判断的时候我们要再加上一个 或者 isLoading ..

不然如果滚动到页面底部加载数据的时候，在加载没有完成以后，再次滚动到页面底部会导致重复加载内容 ..