微信小程序列表刷新

2020-07-26

在微信小程序中时常有列表更新的需求，在这里我列出几种基于下面目录结构的刷新方式

1
2
3

.
├── list
└── update

1.获取列表页实例调用列表方法

更新页中更新成功后使用getCurrentPages()获取当前小程序的页面栈，调用列表页初始化时的方法，实现刷新。

list/index.js

1
2
3

getList(){
  ...get list request
}

update/index.js

update().then(()=>{
  const prevPage = getCurrentPages()[getCurrentPages().length - 2];
  			await prevPage.getList()
  			wx.navigateBack({
          delta:1
        })
})

2.更新接口返回成功数据

在列表add请求并且让后端在add接口成功时返回添加的数据可以直接处理列表。

优点

减少一次网络请求

缺点

更新后的列表数据可能不为最新值

update/index.js

const prevPage = getCurrentPages()[getCurrentPages().length - 2];
            const list = prevPage.data.list;
            list.unshift({
              name: '1sm',
              age:18,
              updateTime: Date.now(),
              size: this.data.size,
              id: this.data.id
            })
            prevPage.setData({
              list
            })

3.onShow更新列表

将初始化数据动作写在onShow生命周期函数中，这种处理方法很有效，但在多次需要展示的页面例如tab页中会带来其他的问题，比如每次展示页面时都发起网络请求过于频繁。

list/index.js

1
2
3

onShow(){
	this.getList();
}

4.页面间通信接口

events是wx.navigateTo的一个属性，是页面间通信接口，用于监听被打开页面发送到当前页面的数据。对我列出的这种目录结构，刷新列表使用这种方式十分简单优雅。

list/index.js

updateItem(event){  //点击列表单个项跳转
  const that = this;
  wx.navigateTo({
    url:`./update/index?id=${event.currentTarget.id}`,
    events:{ 
      updateList(){ //定义更新列表事件
        that.getList();
      }
    }
  })
}

update/index.js

update(){
  updateRequest().then(()=>{ //更新请求成功后
    const ec = this.getOpenerEventChannel() //获取页面间事件通信通道
    ec.emit('updateList');
    wx.navigateBack({
      delta:1
    })
  })
}