MUI自定义下拉刷新样式成功,但是如何自定义上拉加载样式呢

分类：MUI

上拉加载下拉刷新自定义

自定义下拉刷新样式:

css:

/*下拉刷新文字的样式*/  

            .mui-pull-caption {  
                background-image: url(../images/list_header_info.png);  
                background-size: contain;  
                background-repeat: no-repeat;  
                background-position: center;  
                width: 144px;  
                height: 31px;  
                font-size: 0px;  
            }  
            /*下拉刷新圆形进度条的大小和样式*/  

            .mui-spinner {  
                width: 32px;  
                height: 32px;  
            }  
            .mui-spinner:after {  
                background-image: url(../images/progress_circle.png);  
            }  
            /*下拉刷新的箭头颜色*/  

            .mui-icon-pulldown {  
                color: #FF058B;  
            }

background-image: url(../images/list_header_info.png);
这是一个图片

问题:
那么上拉加载更多的样式应该怎么自定义????
看了mui.js和mui.css的mui-pull-bottom-pocket
没有自定义成功,

求大神帮忙自定义上拉加载更多的样式
设置成和下拉刷新一样

2015-08-03 10:15 1 条评论负责人:无分享

13 个回复

wenju (作者) - https://www.mescroll.com -- 精致的下拉刷新和上拉加载组件

自己解决了~~~~(>_<)~~~~

mui.init({  
            pullRefresh: {  
                container: '#pullrefresh',  
                down: {  
                    callback: pulldownRefresh  
                },  
                up: {  
                    contentdown: "",  
                    contentrefresh: "诚信 精品 正品",  
                    contentnomore: "",  
                    callback: uploadRefresh  
                }  
            }  
        });

contentnomore 不能是空串,否则IOS不兼容

写成如下就可以了

mui.init({  
            pullRefresh: {  
                container: '#pullrefresh',  
                down: {  
                    callback: pulldownRefresh  
                },  
                up: {  
                    callback: uploadRefresh  
                }  
            }  
        });  

CSS样式  
.mui-pull-caption {  
       .....  
    font-size: 0px;//字体大小0  
    }

wenju (作者) - https://www.mescroll.com -- 精致的下拉刷新和上拉加载组件

@DCloud_MUICHB 问题解决了我用的是双webview的方式我只在主webview设置了css 所以下拉刷新生效了我没有在子webview设置css 两个webview都得设置css才行的看来得写到app.css里面去公用 O(∩∩)O谢谢大神指点

任我皮 - 程序猿永远不会说不！！！

可以只设置下拉的样式而不设置上拉的吗

j***@qq.com

MUI中自定义的下拉样式为什么不能覆盖这个setPullToRefresh设置的下拉样式？？？？急急急

wenju (作者) - https://www.mescroll.com -- 精致的下拉刷新和上拉加载组件

我的需求是自定义上拉加载更多样式和下拉刷新的一样..

DCloud_UNI_CHB

不需要后半部分的css定义吧：

.mui-pull-bottom-pocket .mui-pull-loading {  
                background-image: url(../images/progress_circle.png);//圆形进度条是生效了,但是原来的灰色进度条还有存在!!  
            }

删掉试试。

wenju (作者)

亲我是要自定义上拉加载更多..我像改变上拉加载更多的进度条但是我设置这个没有效果..

2015-08-03 13:22
wenju (作者)

请问怎么自定义上拉加载更多的样式 ??

2015-08-03 13:23
wenju (作者)

改成和下拉刷新的一样??求教哇大神

2015-08-03 13:24

DCloud_UNI_CHB

我本地测试了你的代码，去掉上述css代码，上拉加载样式已经变了。我理解的不对吗？

wenju (作者)

亲我的这个是双webview的哦

2015-08-03 14:58
wenju (作者)

亲遇到个新问题如果上拉加载完了没有数据了那么就会一直显示"诚信精品正品"这张图; 我如何设置没有数据的时候换另外一张背景图呢

2015-08-03 19:58
wenju (作者)

如何设置没有数据的时候换另外一张背景图呢?因为换背景图的话上拉刷新会受影响的哇, 有监听滑动到底部的事件吗?

2015-08-03 19:59
wenju (作者)

有监听滑动到底部的事件吗?

2015-08-03 19:59
wenju (作者)

监听滑动到顶部也行,滑动到顶部设置回来就好了亲怎么监听到顶部呢除了这个还有其他办法吗? 紧急哇万分紧急~~~

2015-08-03 20:12

DCloud_UNI_CHB

把你的css修改一下：

.mui-pull-caption:not(.mui-pull-caption-nomore) {  

}

这样就仅在有数据时显示你的图标，没数据后继续显示mui默认的“没有更多数据了”；

若想继续自定义“没有更多数据了”的样式，则重写如下css即可：

.mui-pull-caption.mui-pull-caption-nomore{  

}

wenju (作者)

O(∩_∩)O谢谢大神指点迷津

2015-08-03 21:28
wenju (作者)

亲我测试过了 .mui-pull-caption .mui-pull-caption-nomore 无效果

应该是.mui-pull-caption-nomore

2015-08-04 10:19
DCloud_UNI_CHB

是不是中间多了个空格？不过单独使用.mui-pull-caption-nomore，应该也可以生效

2015-08-04 11:10
wenju (作者)

大神 IOS 自定义的无更多数据不生效

.mui-pull-caption.mui-pull-caption-nomore和.mui-pull-caption-nomore 在IOS下都无效果,,Android则正常

2015-09-09 11:57
DCloud_UNI_CHB

回复 wenju:iOS上的css定义要放在子webview中

2015-09-09 11:59
wenju (作者)

两个webview我都放了拷贝过去的一模一样

2015-09-09 12:07
wenju (作者)

回复 DCloud_UNI_CHB:大神,,IOS应该怎么设置呢,,我调了一个下午没有整明白,打算IOS没有数据的时候,用js直接隐藏它算了,但是不知道怎么找底部布局的对象~~~~(>_<)~~~~

2015-09-09 19:13