项目是vue写的(移动端) <div class="mui-scroll"> <a :href="bannerinfo.activity_url" class="icon play"> 链接点击没反应(点元素的最左边才会跳转) </a> <a :href="'tel:'+item.ac_mobile"> {{item.ac_mobile}} 电话号码点击没反应(点元素的最左边才会…
最近工作之余在用mui的框架开发,对mui了解了一些.在真正的app开发项目中,mui上拉加载模块中有两个坑,现在说一下. 1.在函数自己上拉加载行为后的回调函数 该函数是必须要写的,用来写自己的逻辑需求,但是一般情况下,需要设置显示为“加载更多”还是“没有更多数据了”. 看了一些博客和官方文档,基本上都把这个设置放在了定时器中 在定时器中调用获取数据的方法(自己的业务需求) 2.在mui封装的上拉加载中,点击某一项会失效.这个是真的很坑.不过网上也有解决方法.就是采用事件监听的方式,阻止默认行…
mui 上拉加载 实现分页加载功能,效果图: 分页功能(上拉加载): 1.引入需要的css.js文件 <link href="static/css/mui.css" rel="stylesheet" /> <!-- js --> <script src="static/js/jquery-3.2.0.js"></script> <script src="static/js/mui.m…
dropload.js相关介绍和使用以及demo下载详见:https://github.com/ximan/dropload (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件,用了之后感觉挺好用的,就是坑太多,下面列出一些我在实际使用中遇到的问题. 注:如果在使用该插件的时候遇到问题,确实无法解决,也没有人能帮你解决,建议换插件或者加群,群号也在上面的链接里面 问题1:给某个元素(比如查询按钮)加上onclick事件以后,不管点几次,加载效果也会增加几个,如下图所示 解决…
最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui/css/mui.min.css"> <script src="js/jquery-3.2.0.min.js"></script> <script src="common/mui/js/mui.min.js"><…
最近做到移动端页面的开发,需要mui 的上拉刷新功能,最后实现后整理代码如下: 1.需要引入的js <link href="../resource/css/mui.min.css" rel="stylesheet" /><script src="../resource/js/jquery-1.8.1.js" type="text/javascript" charset="utf-8">…
jquery: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>&l…
看起来很简单的东西,实践过程中还是出现了很多麻烦,比如上拉时,状态条跑到了顶部,因为内容没有添加到容器中,再比如下拉的回调函数使用问题,this的传递. html实现部分: <div class="list-t-wrap"> <div id="refreshContainer" class="mui-scroll-wrapper"> <div class="mui-scroll"> <…
mui('#pullrefresh').pullRefresh().refresh(true); if($(".list-item").length == countDataSum) { mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了. } else { mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); }…
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <…