如上所述，我们改进了笔记的数据访问和删除编辑功能，还将页面顶部的写入按钮移至右下角浮动。

样式如下：

原来的下拉刷新和上拉加载函数如下：

因为我刚刚开始使用 -db 组件：

其实自己写查询会比用这个更灵活，而且是云函数，所以改变云函数不需要重新检查小程序。

这是唯一使用 -db 组件的地方。其他地方都是自己写云函数，连接云函数中的db获取数据。

回到主题，我们继续我们的上滑和下拉刷新加载数据的问题。

真机上的效果是这样的：

已超出页面宽度。让我们看看发生了什么事。模拟器上没问题。

问题找到了，因为子组件的宽度是用vh的形式表示的：

在父组件上设置百分比形式：

完毕！

看看在各种模型上的仿真效果：

宽度在几个模拟模型和我的真机上都达到了同样的效果~

当一个问题解决了，新的问题又出现了~

只是我点击的时候没有获取到ID，导致进入详情页面后出错。

您必须在块中设置单击事件。

原来我之前把note结构体的id改成了_id，而我的页面用的是id，所以无法获取到真实的id。只需将其更改为_id：

好吧：

详细信息中的显示并没有正确将图片显示为图片，而是显示为URL。它需要调整。这个就等正文写完了吧~

下拉刷新就完成了~：

上拉刷新：

列表已全部加载：

至此，笔记首页的所有功能就完成了~

因为父组件是-db，所以需要监听子组件中的数据变化：

核心算法在上一章提到过~点此查看上一章

这就是今天的全部内容。下一篇将对详情页的内容进行更新和完善。需要做的改变是：详情页将图片URL显示方式改为图片显示，编辑时支持富文本。