在微信小程序中时常有列表更新的需求,在这里我列出几种基于下面目录结构的刷新方式
1 | . |
1.获取列表页实例调用列表方法
更新页中更新成功后使用getCurrentPages()
获取当前小程序的页面栈,调用列表页初始化时的方法,实现刷新。
list/index.js
1 | getList(){ |
update/index.js
1 | update().then(()=>{ |
2.更新接口返回成功数据
在列表add请求并且让后端在add接口成功时返回添加的数据可以直接处理列表。
优点
- 减少一次网络请求
缺点
- 更新后的列表数据可能不为最新值
update/index.js
1 | const prevPage = getCurrentPages()[getCurrentPages().length - 2]; |
3.onShow更新列表
将初始化数据动作写在onShow
生命周期函数中,这种处理方法很有效,但在多次需要展示的页面例如tab页中会带来其他的问题,比如每次展示页面时都发起网络请求过于频繁。
list/index.js
1 | onShow(){ |
4.页面间通信接口
events
是wx.navigateTo
的一个属性,是页面间通信接口,用于监听被打开页面发送到当前页面的数据。对我列出的这种目录结构,刷新列表使用这种方式十分简单优雅。
list/index.js
1 | updateItem(event){ //点击列表单个项跳转 |
update/index.js
1 | update(){ |