wenju
wenju
  • 发布:2015-08-03 10:15
  • 更新:2019-03-05 09:46
  • 阅读:24856

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 条评论 分享
已邀请:
wenju

wenju (作者) - http://www.mescroll.com -- 精致的下拉刷新和上拉加载js框架. 主流APP案例, 一套代码多端运行~ 问题咨询请发私信哈~

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

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

wenju (作者) - http://www.mescroll.com -- 精致的下拉刷新和上拉加载js框架. 主流APP案例, 一套代码多端运行~ 问题咨询请发私信哈~

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

任我皮

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

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

jzs@qq.com

jzs@qq.com

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

wenju

wenju (作者) - http://www.mescroll.com -- 精致的下拉刷新和上拉加载js框架. 主流APP案例, 一套代码多端运行~ 问题咨询请发私信哈~

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

DCloud_UNI_CHB

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

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

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

wenju

wenju (作者) - http://www.mescroll.com -- 精致的下拉刷新和上拉加载js框架. 主流APP案例, 一套代码多端运行~ 问题咨询请发私信哈~

@DCloud_MUI_CHB

1158062536@qq.com

1158062536@qq.com

能否发我一份这个自定义的下拉刷新。谢谢了

  • wenju (作者)

    https://github.com/mescroll/mescroll#中级案例-intermediate-demos-

    2017-07-17 08:12

791620110@qq.com

791620110@qq.com

请问,如何能让加载图片动起来

cq18250703562@163.com

cq18250703562@163.com

能否发我一份这个自定义的下拉刷新。谢谢了

xulijing0912@163.com

要回复问题请先登录注册