mui刷新不显示动画_mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)...

博客详细描述了在使用mui框架时遇到的三个问题:1)动态添加图片到轮播组件导致不滚动,解决办法是在ajax数据加载后初始化轮播;2)动态加载数据后indexedList无法滚动和搜索,解决方法是重新初始化indexedList;3)下拉刷新后无法继续上拉加载,解决方案是正确使用refresh方法。这些经验来源于实际开发中遇到的问题并给出了具体的解决代码。

mui-slider

问题:动态给mui的图片轮播添加图片,轮播不滚动.

解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 3000});添加在ajax构建数据之后。

备注:图片轮播如何初始显示第2张图片,mui('.mui-slider').slider().gotoItem(1),有滑动效果

mui('.mui-slider').slider().gotoItem(1,0),无滑动效果 ;

mui-indexed-list

问题:动态加载数据后不能滚动,不能搜索.

解决:ajax构建数据后,要初始化indexedList,加下面的代码在ajax加载数据后.

var header = document.querySelector('header.mui-bar');

var list = document.getElementById('list');

//calc hieght

list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';

//create

window.indexedList = new mui.IndexedList(list);

备注:搜索方法:window.indexedList.search('');

下拉刷新

问题:上拉加载完所有数据后,再下拉刷新不能继续上拉加载

解决:下拉刷新时要refresh上拉加载,下拉刷新的ajax后加 this.refresh(true); 或者是 this.enablePullupToRefresh();this.finished = false;  (原因有两种下拉刷新)

备注:

多个下拉上拉,使用mui.pullToRefresh.js时:

上拉加载没有数据执行,self.endPullUpToRefresh(true);

上拉加载有数据执行,self.endPullUpToRefresh(false);

下拉刷新ajax加载完数据后,执行self.endPullDownToRefresh();self.refresh(true);

单个下拉上拉:

上拉加载没有数据执行,mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);

上拉加载有数据执行,mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);

下拉刷新ajax加载完数据后,执行:

mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed

mui('#pullrefresh').pullRefresh().refresh(true);

动态给mui的图片轮播添加图片,使用的ajax获取的数据,怎么弄轮播也不滚动,最后把滚动轮播图片的mui("#slider").slider({interval: 3000});添加在ajax的最后就可以了。

原因是你ajax 还没有执行完成,已经支持mui("#slider").slider({interval: 3000}); 这段代码了,所以图片轮播无法滚动。

转自【B5教程网】:http://www.bcty365.com/content-146-2402-1.html

转自【B5教程网】:http://www.bcty365.com/content-146-2402-1.html

转自【B5教程网】:http://www.bcty365.com/content-146-2402-1.html

转自【B5教程网】:http://www.bcty365.com/content-146-2402-1.html

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值