MUI webapp上拉加载在IOS手机上显示异常(提示文字显示在顶部,上拉变成了下拉)问题解决

问题现象:

(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();关闭下拉刷新提示。问题便得到了解决。

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现一个移动端的table表格,并且有上拉加载下拉刷新的功能,你可以使用一些开源的UI框架或者组件库,例如MUI、Vant、Ant Design Mobile等。 以下是一个使用MUI框架实现的示例代码: HTML: ```html <!-- table表格容器 --> <div id="table-container"> <!-- table表格 --> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 1</a> </li> <<li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 2</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 3</a> </li> <!-- 省略更多的表格行 --> </ul> <!-- 上拉加载提示 --> <div class="mui-pull-bottom-tips"> <div class="mui-loading"> 加载中... </div> </div> </div> ``` CSS: ```css /* table表格容器样式 */ #table-container { height: 100%; } /* 上拉加载提示样式 */ .mui-pull-bottom-tips { height: 50px; line-height: 50px; text-align: center; font-size: 14px; color: #888; } .mui-pull-bottom-tips .mui-loading { display: inline-block; width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #07c160; animation: mui-rotate 0.6s linear infinite; } @keyframes mui-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } ``` JavaScript: ```javascript // 初始化上拉加载 mui.init({ pullRefresh: { container: '#table-container', up: { contentrefresh: '正在加载...', callback: function() { // 模拟加载数据 setTimeout(function() { // 插入新的表格行 var table = document.querySelector('.mui-table-view'); var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right">New Item</a>'; table.appendChild(li); // 结束上拉加载 mui('#table-container').pullRefresh().endPullupToRefresh(false); }, 1000); } } } }); ``` 注意:这只是一个简单的示例代码,实际情况可能需要更复杂的代码来满足需求。另外,上拉加载下拉刷新功能需要与后端API接口配合使用。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值