问题现象:
(1)MUI webapp上拉加载在android手机上正常
(2)在IOS手机上,“上拉加载更多”、"没有数据了"提示文字,显示在列表顶部,而不是底部。
(3)在IOS手机上,上拉的动作变成了下拉
源码:
mui.init({
pullRefresh: {
container: '#pullrefresh',
up: {
auto:true,
contentrefresh: '正在加载...',
contentnomore:'没有更多数据了',
callback: pullupRefresh
}
}
});
网上搜索了很多,有说MUI版本的问题,也有说是静态页面DOM的问题(什么ul->li,没搞懂),最直接的解决思路是看官方demo:hello H5+,源码中也用到了上拉加载,安装到IOS手机上,并无问题,但是案例中的上拉加载,配置了下拉动作。于是在自己的项目中也初始化了下拉行为,代码改为:
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
style:'circle',
callback: pulldownRefresh
},
up: {
auto:true,
contentrefresh: '正在加载...',
contentnomore:'没有更多数据了',
callback: pullupRefresh
}
}
});
新增的pulldownRefresh下拉刷新回调函数没有做任何事情,仅仅调用了mui('#pullrefresh').pullRefresh().endPulldownToRefresh();关闭下拉刷新提示。问题便得到了解决。