在移动应用开发中，我们经常需要处理多个页面之间的交互，特别是在使用HTML5+CSS3+JavaScript构建的Hybrid App中。MUI是一个流行的轻量级移动框架，它提供了丰富的组件来帮助开发者实现类似原生应用的功能。在这个场景中，我们讨论的是如何在两个页面——子页面（essc_sub.html）和父页面（essc_main.html）中，结合使用MUI的上拉加载、下拉刷新以及poppicker功能，并解决它们协同工作时可能遇到的问题。
让我们深入了解MUI的这些关键组件：
1. **上拉加载（Up Pull Refresh）**：当用户滚动到底部时，这个功能可以触发加载更多数据的事件。这对于内容丰富的列表或者流式布局非常有用，比如新闻列表或者社交媒体的动态。
2. **下拉刷新（Down Pull Refresh）**：当用户上拉屏幕时，这个功能会更新列表数据，通常用于显示最新内容。例如，在邮件应用中，用户可以通过下拉刷新获取最新的邮件。
3. **Poppicker组件**：这是一个选择器控件，用于在弹出的对话框中展示一系列可选项供用户选择，常见于日期选择、地区选择等场景。
在使用这些组件时，可能会遇到的问题主要包括：
- **事件冲突**：当多个页面或组件同时使用相同的事件监听器时，可能会导致事件处理混乱。例如，子页面的下拉刷新可能会影响到父页面，或者上拉加载与poppicker的触发机制产生冲突。
- **数据同步**：如果子页面的数据需要在父页面中显示，那么如何保持两者之间数据的一致性是一个挑战。
- **页面跳转与组件状态管理**：在页面切换过程中，如何正确地保存和恢复各个组件的状态，避免因页面跳转导致组件失效。
解决这些问题的方法包括：
- **事件隔离**：为每个组件设置独立的事件监听器，避免全局事件冲突。可以使用MUI提供的API来控制各个组件的启动和停止。
- **数据传递**：利用MUI的页面间通信机制，如使用`mui.openWindow`时传递参数，或者通过`plus.runtime.message`发送和接收消息，实现父页面与子页面间的数据同步。
- **状态管理**：在页面隐藏或者销毁时，保存组件的状态，如是否开启下拉刷新或上拉加载。当页面重新显示时，根据保存的状态恢复组件。
在`essc_sub.html`和`essc_main.html`的源码中，我们可以看到具体的实现细节。例如，子页面可能包含了上拉加载的初始化代码：
```javascript
mui.init({
pullRefresh : {
container:'#pullrefresh',
down: {
callback: pulldownRefresh,
height: 50, //可选，默认50，表示触发下拉刷新的距离，单位px
auto: false, //可选，是否自动下拉刷新，默认false
offset: 100, //可选，表示主体距离顶部达到多少px时触发下拉刷新，单位px
},
}
});
```
而父页面可能有下拉刷新的配置：
```javascript
mui.init({
pullRefresh : {
container:'#pullrefresh',
up: {
contentrefresh: '正在加载...',
contentnomore:'没有更多数据了', //可选
callback: pullupRefresh
}
}
});
```
同时，子页面中可能使用了Poppicker，初始化如下：
```javascript
var picker = new mui.PopPicker();
picker.show(function(rs){
var value = rs.text;
//do something with selected value
});
```
通过分析这些源码，我们可以学习到如何在实际项目中正确集成和使用MUI的上拉加载、下拉刷新以及poppicker组件，以及如何解决它们在多页面环境中可能出现的问题。在实践中，不断调试和优化，才能更好地提升用户体验和应用性能。
两个页面.zip （2个子文件） 
mui下拉和选择插件poppicker 
essc_sub.html 11KB
