这个列表页面滚动到最后的时候可以显示一个页脚 .. 提示用户已经没有需要加载的内容了 ..

可以再去定义一个模板文件 .. 放在 templates 目录的下面， 名字是 footer.wxml

一组 template .. 添加一个 name 设置一下模板的名字 .. footer ..

模板里面用一组 view .. 上面加上 footer 这个类 .. 然后用一个 wx:if .. 绑定一个 isEarth ..

里面再包装一个 view，上面加上 footer_img .. 它里面是一个图片 .. 用一个 image 组件 .. src 设置一下图片的地址 .. 在我的项目里的 assets 下面的 images 里面有一个 landscape.png ..

再去用一下这个模板 .. 打开首页视图 .. 导入 footer 这个模板文件 ..

最下面再用一个 template .. 要使用的模板是 footer .. 用 data 绑定传递给模板的数据，添加一个 isEarth ..

逻辑

然后再去处理一下这个页脚的显示逻辑 .. 先在页面上添加一个 isEarth 数据 .. 把它设置成 false ..

再找到 onReachBottom .. 在请求成功以后，我们可以动态的设置一下 isEarth 的值 .. 它的值是判断 currentPage 大于等于 totalPages 的结果 ..

预览

回到开发者工具，预览一下 .. 向下滚动页面 ... 继续滚动 ... 没有要显示的内容以后，会显示一个页脚图片 ...

样式

这个页脚图像的显示可以再修改一下，我只想显示这个图像底部的一部分 .. 打开小程序的样式文件 .. 在这里可以去设置一下 footer__img 的样式 .. height 设置成 120px .. overflow 设置成 hidden ，隐藏多余的部分 .. display 设置成 flex ... align-items 设置成 flex-end ..

然后再设置一下 footer__img 下面的 image 的样式 .. 把 width 设置成 100% ...

最后再到模板器上预览一下 ...