MUi下拉刷新和上拉加载click事件失效问题
今天应用MUi的上拉加载更多方法后，发现给li元素注册点击click事件没有反应。
最后折腾半个小时发现一个方法，用mui.on( )添加事件监听，用tap代替click事件即可解决
mui(&#ulId&).on(&tap&,&li&,function(){
// 逻辑代码，例如跳转详情页、ajax
因为数据条数较多，所以这里用了，事件委托处理输入关键字或相关内容进行搜索
由于mui中自带的下拉组件存在bug，一个项目中无法有多个，因此改造了iscroll5作为下拉刷新的组件，以下是代码，请参考。首先是页面布局，iscroll的推荐的wrapper和scroller两个div，也使用了mui的一些样式。&div id=&wrapper& class=&mui-content mui-iscroll-wrapper&&
&div id=&scroller&&
&div id=&pullDown& class=&ub ub-pc c-gra&&
&div id=&pullDownIcon&&&/div&
&div id=&pullDownLabel&&下拉刷新&/div&
&ul class=&mui-table-view mui-table-view-chevron& id=&dataList&&&/ul&
&div id=&pullUp& class=&ub ub-pc c-gra&&
&div id=&pullUpIcon&&&/div&
&div id=&pullUpLabel&&上拉显示更多...&/div&
\n样式的css，主要是下拉和上拉以后的一些样式定义，比较简陋&style&
#wrapper {
width: 100%;
background: #
#pullDown,
height: 40
line-height: 40
padding: 5px 10
font-weight:
font-size: 14
color: #888;
#pullDown .pullDownIcon,
#pullUp .pullUpIcon {
height: 40
background: url(img/pull-icon@2x.png) 0 0 no-
-webkit-background-size: 40px 80
background-size: 40px 80
-webkit-transition-property: -webkit-
-webkit-transition-duration: 250
#pullDown .pullDownIcon {
-webkit-transform: rotate(0deg) translateZ(0);
#pullUp .pullUpIcon {
-webkit-transform: rotate(-180deg) translateZ(0);
#pullDown.flip .pullDownIcon {
-webkit-transform: rotate(-180deg) translateZ(0);
#pullUp.flip .pullUpIcon {
-webkit-transform: rotate(0deg) translateZ(0);
#pullDown.loading .pullDownIcon,
#pullUp.loading .pullUpIcon {
background-position: 0 100%;
-webkit-transform: rotate(0deg) translateZ(0);
-webkit-transition-duration: 0
-webkit-animation-name:
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count:
-webkit-animation-timing-function:
.-webkit-keyframes loading {
-webkit-transform: rotate(0deg)translateZ(0);
-webkit-transform: rotate(360deg) translateZ(0);
\n关键的js代码var firstresult = 0;
var pagesize = 20;
var stocktype = 0;
var pullDownEl, pullDownL;
var pullDownc, pullU
var pullUpEl, pullUpL;
var Downcount = 0,
Upcount = 0;
var loadingStep = 0; //加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新
function pullDownAction() { //下拉事件
setTimeout(function() {
var el, li,
//plus.nativeUI.showWaiting();
console.log('触发了下拉更多');
removeClass(pullDownEl, 'loading');
pullDownL.innerHTML = '下拉显示更多...';
pullDownEl['class'] = pullDownEl.classN
pullDownEl.className = '';
pullDownEl.style.display = 'none';
initData(stocktype);
loadingStep = 0;
//plus.nativeUI.closeWaiting();
}, 1000); //1秒
function pullUpAction() { //上拉事件
setTimeout(function() {
var el, li,
console.log('出发了上拉刷新事件');
removeClass(pullUpEl, 'loading');
pullUpL.innerHTML = '上拉显示更多...';
pullUpEl['class'] = pullUpEl.classN
pullUpEl.className = '';
pullUpEl.style.display = 'none';
nextPage(stocktype);
//myScroll.refresh();
loadingStep = 0;
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownL = document.getElementById('pullDownLabel');
pullDownEl['class'] = pullDownEl.classN
pullDownEl.className = '';
pullDownEl.style.display = 'NONE';
pullUpEl = document.getElementById('pullUp');
pullUpL = document.getElementById('pullUpLabel');
pullUpEl['class'] = pullUpEl.classN
pullUpEl.style.display = 'NONE';
myScroll = new IScroll('#wrapper', {
probeType: 2, //probeType：1对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。probeType：2总执行滚动，除了势头，反弹过程中的事件。这类似于原生的onscroll事件。probeType：3发出的滚动事件与到的像素精度。注意，滚动被迫requestAnimationFrame（即：useTransition：假）。
scrollbars: true, //有滚动条
mouseWheel: true, //允许滑轮滚动
fadeScrollbars: true, //滚动时显示滚动条，默认影藏，并且是淡出淡入效果
bounce: true, //边界反弹
interactiveScrollbars: true, //滚动条可以拖动
shrinkScrollbars: 'scale', // 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
click: true, // 允许点击事件
keyBindings: true, //允许使用按键控制
momentum: true // 允许有惯性滑动
myScroll.on('scroll', function() {
if (loadingStep == 0 && !pullDownEl.className.match('flip|loading') && !pullUpEl.className.match('flip|loading')) {
if (this.y & 5) {
//下拉刷新效果
pullDownEl.className = pullUpEl['class'];
pullDownEl.style.display = '';
myScroll.refresh();
pullDownEl.className += 'flip';
pullDownL.innerHTML = '准备刷新...';
loadingStep = 1;
} else if (this.y & (this.maxScrollY - 5)) {
//上拉刷新效果
pullUpEl.className = pullUpEl['class'];
pullUpEl.style.display = '';
myScroll.refresh();
pullUpEl.className += 'flip';
pullUpL.innerHTML = '准备刷新...';
loadingStep = 1;
//滚动完毕
myScroll.on('scrollEnd', function() {
if (loadingStep == 1) {
if (pullUpEl.className.match('flip|loading')) {
removeClass(pullUpEl, 'flip');
addClass(pullUpEl, 'loading');
pullUpL.innerHTML = 'Loading...';
loadingStep = 2;
pullUpAction();
} else if (pullDownEl.className.match('flip|loading')) {
removeClass(pullDownEl, 'flip');
addClass(pullDownEl, 'loading');
pullDownL.className = 'Loading...';
loadingStep = 2;
pullDownAction();
//初始化数据
initData();
function initData() {
firstresult = 0;
getData('0', stocktype);
document.getElementById(&dataList&).innerHTML ='';
myScroll.refresh();
function nextPage() {
firstresult +=
getData('1', stocktype);
myScroll.refresh();
function getData(flag) {
var url = ‘’;
firstresult: firstresult,
maxcount: pagesize
success: function(data) {
var source = document.getElementById(&contact-template&).innerHTML;
var template = Handlebars.compile(source);
var wos = {
wos: data.result
if (flag == '1') {
document.getElementById(&dataList&).innerHTML += template(wos);
document.getElementById(&dataList&).innerHTML = template(wos);
error: function(data) {
console.log(objToString(data));
\n项目用了handlerbars。
使用了mui-scroll-wrapper，但是无法滚动到最底部，什么原因？
也不知道什么时候
MUI团队才去 优化这个功能，使用者第三方的js 好不爽
父框都overflow:了怎么滚动
确实有点不懂怎么用，跑不起来，引入了handlerbars还是报错有些东西没定义，触发pullUpAction();各种错误，写就写全一点，别害后来者花了很多时间来看最后还是白费
最近新出的滑动插件，能滚起上万个dom，快来看看http://www.chjtx.com/JRoll/
@亮亮 上拉加载没有更多数据了 应该在哪修改~~~~(&_&)~~~~
很久了，我确实也是抄的，修改了一些bug，能跑起来就放出来了。
我感觉你修改的是这个贴 http://www.cnblogs.com/mrxia/p/3868126.html
没法用~~~~(&_&)~~~~
完全从网上抄的代码，不过脑子
在下拉的同时,无法复制,请问你用什么好的解决方法吗?
当只有一条数据的时候怎么下拉刷新呢 iscroll 拉不动
问下楼主用的iScroll哪个版本的呢？
用过iscroll5和4，在略低版本的安卓机上交互效果非常差；但在webkit 内核高一点的版本上，效果相当赞。
http://www.wglong.com/index/demos/pullDownRefresh/cubiq-iscroll/index.html
这是网上找的例子
把我的代码抄走，自己加一堆item就可以运行了，动动手
你好，能提供一个可以运行的demo吗？
有不明白的可以跟帖问
要回复文章请先或
前端工程师
赞助DCloud可免广告，MUI下拉刷新与区域滚动冲突的解决办法
加上这个样式,就可以解决了（推荐）
.mui-plus-pullrefresh .mui-scroll {
position: absolute;
width: 100%;
如果上面的不行,用下面的样式:
宽度根据自己的情况来定,但 100%和auto不行
.mui-scroll-wrapper .mui-scroll{
width: 544px !important;
mui框架内容区域滚动部分详解注意事项
mui框架 页面无法滚动解决方法
解决使用`SwipeRefreshLayout`下拉刷新和左右滑动事件冲突的问题
MUI下拉刷新
mui的下拉刷新的用法及其解决双滚动的办法
mui框架使用侧滑并在首页添加上拉加载功能出现的问题
webview向上滚动与下拉刷新冲突（X5WebView）
mui监听多个下拉刷新当前处于哪个选项卡
mui下拉刷新的整理
mui 上拉加载／下拉刷新异常
双滚动条异常
没有更多推荐了，输入关键字或相关内容进行搜索
自定义下拉刷新样式:
css:/*下拉刷新文字的样式*/
.mui-pull-caption {
background-image: url(../images/list_header_info.png);
background-size:
background-repeat: no-
background-position:
width: 144
height: 31
font-size: 0
/*下拉刷新圆形进度条的大小和样式*/
.mui-spinner {
height: 32
.mui-spinner:after {
background-image: url(../images/progress_circle.png);
/*下拉刷新的箭头颜色*/
.mui-icon-pulldown {
color: #FF058B;
\nbackground-image: url(../images/list_header_info.png);
这是一个图片
问题:
那么上拉加载更多的样式应该怎么自定义????
看了mui.js和mui.css的mui-pull-bottom-pocket
没有自定义成功,求大神帮忙自定义上拉加载更多的样式
设置成和下拉刷新一样
赞助DCloud可免广告，
问题解决了 我用的是双webview的方式 我只在主webview设置了css 所以下拉刷新生效了 我没有在子webview设置css
两个webview都得设置css才行的
看来得写到app.css里面去公用
O(∩_∩)O谢谢 大神指点
自己解决了~~~~(&_&)~~~~mui.init({
pullRefresh: {
container: '#pullrefresh',
callback: pulldownRefresh
contentdown: &&,
contentrefresh: &诚信 精品 正品&,
contentnomore: &&,
callback: uploadRefresh
\ncontentnomore 不能是空串,否则IOS不兼容写成如下就可以了mui.init({
pullRefresh: {
container: '#pullrefresh',
callback: pulldownRefresh
callback: uploadRefresh
.mui-pull-caption {
font-size: 0//字体大小0
我的需求是 自定义上拉加载更多
样式和下拉刷新的一样..
不需要后半部分的css定义吧：.mui-pull-bottom-pocket .mui-pull-loading {
background-image: url(../images/progress_circle.png);//圆形进度条是生效了,但是原来的灰色进度条还有存在!!
\n删掉试试。
我本地测试了你的代码，去掉上述css代码，上拉加载样式已经变了。我理解的不对吗？
把你的css修改一下：.mui-pull-caption:not(.mui-pull-caption-nomore) {
\n这样就仅在有数据时显示你的图标，没数据后继续显示mui默认的“没有更多数据了”；若想继续自定义“没有更多数据了”的样式，则重写如下css即可：.mui-pull-caption.mui-pull-caption-nomore{
能否发我一份这个自定义的下拉刷新。谢谢了
请问,如何能让加载图片动起来
能否发我一份这个自定义的下拉刷新。谢谢了
要回复问题请先或
https://github.com/mescroll/mescroll.git -- 精致的下拉刷新和上拉加载js框架. 主流APP案例, 一套代码多端运行~ 问题咨询请发私信哈~
浏览: 17473
赞助DCloud可免广告，