一、关于MUI插件中的上拉加载和下拉刷新问题
1 此插件,在上拉加载和下拉刷新的情况下,默认已经把a链接的跳转功能禁止掉
2 解决方法:
1 找到对应的原文件,去修改源代码!!!不推荐
2 利用js去修改当前的代码:
$("body").on("tap","a",function(){
var href = this.href;//获取到当前a链接的href值
location.href = href;//直接利用window的方法去进行跳转
}
)
二 、关于使用MUI的下拉刷新和上拉加载
1 HTML代码:
注意,要三层嵌套,并别在最大的容器添加相对定位 position:relative
// lt_view 为下拉-上拉的容器 里面必须加一层嵌套 div
<div class="lt_view">
//2 div 为额外添加的嵌套
<div>
//3 .lt_content 为存放数据的容器
<ul class="lt_content">
数据
</ul>
</div>
</div>
2 初始化的js代码 callback 是一个回调函数
mui.init({
pullRefresh: {
container: ".lt_view",
down: {
auto: true,
// 触发下拉刷新时自动触发
callback: function () {
}
},
up:{
// 触发上拉刷新时自动触发
callback:function () {
}
}
}
});
3 关于上拉下拉的一些常用的api
// 结束下拉刷新
mui('.lt_view').pullRefresh().endPulldownToRefresh();
// 结束上拉加载更多 如果没有数据 传入 true 否则 传入 false
mui('.lt_view').pullRefresh().endPullupToRefresh();
// 重置 组件
mui('.lt_view').pullRefresh().refresh(true);
注意:在使用重置组件的时候。如果代码片段是生成的代码,必须在代码生成之后再使用
不然是没有效果的~
三、关于MUI的懒加载,当数据图片过多的时候,占位使用
1 引入文件 先引入mui-lazyload.js 然后引入mui-lazyload.img.js
如:
<script src="./js/mui-lazyload.js"></script>
<script src="./js/mui-lazyload.img.js"></script>
2 在需要进行懒加载的img的src属性变成data-lazyload
3 在生成标签之后,进行初始化
此图片路径和图片都是自定义
mui(document).imageLazyload({
placeholder: '../static/images/60x60.gif'
});