小程序详情页返回列表页并刷新数据 列表页是组件不能用onShow
时间: 2024-09-12 20:07:02 浏览: 36
详解小程序中h5页面onShow实现及跨页面通信方案
在微信小程序中,如果你想要从详情页跳转回列表页并在列表页自动刷新数据,通常可以这样做:
1. **页面结构**:在你的页面结构中,详情页和列表页需要有良好的父子关系。例如,你可以将列表页作为全局的父组件,并在详情页通过`wx.navigateTo`跳转。
2. **事件触发**:在详情页的`onClose`或`onHide`等生命周期函数中,你可以调用`this.$apply()`或者设置一个全局变量来通知列表页需要更新数据。`$apply`会触发视图层的更新。
```javascript
// 详情页的 onHide 函数
onHide() {
// 触发数据刷新
this.globalData.refreshData = true;
}
```
3. **列表页响应**:在列表页的`data`或者`watch`中监听这个全局变量的变化。当变量变化时,进行数据获取并刷新列表。
```javascript
Page({
data: {
refreshData: false,
items: []
},
watch: {
'globalData.refreshData': function(newVal) {
if (newVal) {
// 刷新数据
this.getNewData();
}
}
},
getNewData() {
// 获取新的数据并替换旧的数据
wx.request(...);
this.setData({ items: newData });
}
})
```
阅读全文