小程序开发-完善步骤条的上滑、下拉刷新操作

上文说到,我们完善了数据接入以及对笔记的删除、编辑功能,还有将页面顶部的写一条按钮放到了右下角悬浮。 样式如下:

原有的下拉刷新和上拉加载函数如下:

因为刚开始用的是uniapp的unicloud-db组件:

其实自己写一个查询会比用这个更灵活,而且是云函数,这样改动云函数也不需要将小程序重新提审。 也就只有这一个地方用到了unicloud-db组件,其它地方我都是自己写云函数,在云函数里连接db获取数据。 回到正题,继续我们的上滑和下拉刷新加载数据问题。

真机上面的效果是这样的:

超出页面宽度了,看看咋回事,模拟器上好好的。 找到问题了,因为子组件的宽度是以vh的形式表示的:

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

搞定! 看看在各个机型上的模拟效果:

宽度在几个模拟机型、我的真机上达到了一致的效果~ 一个问题解决又有新的问题~ 就是点击的时候没有有拿到id,导致进到详情页后报错了

就得在区块设置一个点击事件。 原来是我之前把笔记结构的id改成_id了,我页面又使用的id,所以才取不到真正的id,改成_id即可:

好了:

详情里面的显示没有把图片正确显示未图片,而是url了,还得调整一下,这个等正文搞定先~ 下拉刷新搞定~:

上拉刷新:

列表全部加载完成:

到此,笔记首页的所有功能都做完啦~ 因为父组件是unicloud-db,所以需要在子组件中监听data的变动:

核心算法在上一章节中有提到~ 点我查看上一章节

今天就先写到这里啦,下一篇文章更新完善详情页的内容,需要改动的地方为:详情页将图片url展示方式改为图片显示,编辑时支持富文本。

关注我期待后续哦~

相关推荐
闲人编程3 分钟前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
JudithHuang4 分钟前
Mac版微信开发者工具登录二维码不显示问题解决方案
前端
Swift社区18 分钟前
如何解决 Vue2 前端项目为何无法访问本地资源(chunk.js 加载一直 pending/转圈)
开发语言·前端·javascript
清风细雨_林木木36 分钟前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
大熊猫侯佩38 分钟前
iOS 26 仅需几行代码让 SwiftUI 7 液态玻璃界面焕发新春
前端·swiftui·apple
BillKu1 小时前
Vue3应用执行流程详解
前端·javascript·vue.js
Codebee2 小时前
OneCode 移动套件多平台适配详细报告
前端·人工智能
你知唔知咩系timing啊2 小时前
🎙️ 站在巨人肩膀上:基于 SenseVoice.cpp 的前端语音识别实践
前端
一位搞嵌入式的 genius2 小时前
前端开发核心技术与工具全解析:从构建工具到实时通信
前端·笔记