XBB
XBB
  • 发布:2015-01-25 12:21
  • 更新:2015-01-25 12:52
  • 阅读:530

下拉刷新的问题

分类:MUI
mui


为什么上拉刷新的字会叠加到上面?

2015-01-25 12:21 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

页面代码贴出来

  • XBB (作者)

    index.html


    mui.init({

    subpages: [{

    url: 'index/recommended.html',

    id: 'recommended',

    styles: {

    top: '89px', //mui标题栏默认高度为48px;

    }

    }]

    });


    html部分:


    <header class="mui-bar mui-bar-nav mui-badge-primary" style="position:relative;">

    <span class="mui-icon mui-icon-contact mui-pull-right mui-h1"></span>

    <a class="u-title"></a>

    <div class="u-slidermenu">

    <a class="mui-control-item">


                        推荐  

    </a>
    <a class="mui-control-item">

    高分

    </a>
    <a class="mui-control-item">

    社会

    </a>
    <a class="mui-control-item">

    科技

    </a>
    <a class="mui-control-item">

    娱乐

    </a>
    <a class="mui-control-item">

    搞笑

    </a>
    <a class="mui-control-item">

    财经

    </a>
    <a class="mui-control-item">

    体育

    </a>
    <a class="mui-control-item">

    军事

    </a>
    <a class="mui-control-item">

    国际

    </a>
    </div>
    </header>

    ======================================================================

    recommended.html


    mui.init({

    swipeBack: false,

    pullRefresh: {

    container: '#pullrefresh',

    down: {

    callback: pulldownRefresh

    },

    up: {

    callback: pullupRefresh

    }

    }

    });


            (function($) {  
    $('.mui-scroll-wrapper').scroll({
    indicators: true //是否显示滚动条
    });
    })(mui);

    function pulldownRefresh() {
    setTimeout(function() {
    var table = document.body.querySelector('.mui-table-view');
    var cells = document.body.querySelectorAll('.mui-table-view-cell');
    for (var i = cells.length, len = i + 3; i < len; i++) {
    var li = document.createElement('li');
    li.className = 'mui-table-view-cell';
    li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
    //下拉刷新,新纪录插到最前面;
    table.insertBefore(li, table.firstChild);
    }
    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
    }, 1500);
    }
    var count = 0;
    /**
    * 上拉加载具体业务实现
    */
    function pullupRefresh() {
    setTimeout(function() {
    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
    var table = document.body.querySelector('.mui-table-view');
    var cells = document.body.querySelectorAll('.mui-table-view-cell');
    for (var i = cells.length, len = i + 20; i < len; i++) {
    var li = document.createElement('li');
    li.className = 'mui-table-view-cell';
    li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
    table.appendChild(li);
    }
    }, 1500);
    }
    if (mui.os.plus) {
    mui.plusReady(function() {
    setTimeout(function() {
    mui('#pullrefresh').pullRefresh().pullupLoading();
    }, 1000);

    });
    } else {
    mui.ready(function() {
    mui('#pullrefresh').pullRefresh().pullupLoading();
    });
    }

    html部分:


    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">

    <div class="mui-scroll">

    <!--数据列表-->

    <ul class="mui-table-view mui-table-view-chevron">


                </ul>  
    </div>
    </div>

    2015-01-25 12:45

小微

小微

subpage设置下top

  • XBB (作者)

    subpages: [{

    url: 'index/recommended.html',

    id: 'recommended',

    styles: {

    top: '89px', //mui标题栏默认高度为48px;

    }

    }]

    我设置了这个的 但是不好使 好像更新的文字固定死在48px以下

    2015-01-25 12:42

DCloud_UNI_FXY

DCloud_UNI_FXY

把下列代码加到你的两个html里(index.html,recommended.html)
可保证android,ios均有效

.mui-bar-nav~.mui-content{  
                padding-top: 89px;  
            }  
            .mui-bar-nav~.mui-content .mui-pull-top-pocket{  
                top: 89px;  
            }
  • XBB (作者)

    大神!十分感谢!

    2015-01-25 12:55

  • XBB (作者)

    你好 还是刚才的源码 为什么上拉刷新的文字提示看不到了 在屏幕以外去了

    2015-01-25 13:48

  • XBB (作者)

    已解决 打扰了!

    2015-01-25 13:51

  • DCloud_UNI_FXY

    没发现此问题,截图说明

    2015-01-25 13:52

要回复问题请先登录注册