[JavaScript知识库]apicloud实现 回退到上一个页面并刷新页面数据——基础积累——addEventListener的使用

最近在做apicloud开发的app，有个需求是这样的： A页面是个列表页面，点击详情按钮可以进入到B页面，在详情页面操作后，回退到A页面，并且需要刷新A页面的数据。

从网上百度到的方法有两个：

方法1：api.execScript

这个方法的使用是这样的：

1.1 在A页面添加一个方法：比如test()

这个test()方法可以存放列表的更新方法。

1.2 在B页面使用api.execScript调用A页面的方法

B页面代码如下：

var param='参数';
var fun = 'test('+param+')';
 api.execScript({
       name:'A页面的name',
       script: fun
 });

A页面代码如下：

test(val){
	//val就是传递过来的参数
	...//执行刷新列表的方法
}

感觉上面的写法没有问题，但是实际使用的时候，并没有实现A页面列表的刷新效果。

方法2：api.addEventListener与api.sendEvent

这个方法的使用是这样的：

2.1 在A页面添加：api.addEventListener

api.addEventListener({
   name: 'refreshInStorage'
}, function(ret, err) {
    vm.refreshData();
});

上面代码中的vm是我给new Vue({})定义的变量参数名，refreshData就是new Vue({})中的methods中的一个方法；

为了防止重复添加同一个监听事件，在创建监听事件之前可以使用：api.removeEventListener

代码如下：

api.removeEventListener({
    name: 'refreshInStorage'
});
api.addEventListener({
    name: 'refreshInStorage'
}, function(ret, err) {
    vm.refreshData();
});

2.2 在B页面回退上一页的方法中：使用api.sendEvent触发refreshInStorage的监听方法

api.sendEvent({
   name: 'refreshInStorage',
   extra: {}
});
api.closeWin();//关闭当前的win页面，回退到上一页面

完成！！！