fan1130work@163.com
fan1130work@163.com
  • 发布:2016-10-18 13:56
  • 更新:2019-01-24 10:55
  • 阅读:1990

下拉刷新不显示等待文字

分类:MUI

下拉刷新不显示等待文字:PC浏览器打开正常,但是手机端却没有。检查后发现手机上运行时,没有进到下面的_initPocket方法中,但是为什么PC和手机端会表现不一致。不知道该如何解决,请高人指点。

_init: function() {
this._super();
alert("pocket---in");
this._initPocket();
alert("pocket---out");
},
.......
_initPocket: function() {
var options = this.options;
if (options.down && options.down.hasOwnProperty('callback')) {
alert("-----1-----");
this.topPocket = this.scroller.querySelector('.' + CLASS_PULL_TOP_POCKET);
if (!this.topPocket) {
this.topPocket = this._createPocket(CLASS_PULL_TOP_POCKET, options.down, CLASS_LOADING_DOWN);
this.wrapper.insertBefore(this.topPocket, this.wrapper.firstChild);
}
this.topLoading = this.topPocket.querySelector('.' + CLASS_PULL_LOADING);
this.topCaption = this.topPocket.querySelector('.' + CLASS_PULL_CAPTION);
console.log("-----2-----");
console.log(mui(".mui-pull-top-pocket")[0]);
}
if (options.up && options.up.hasOwnProperty('callback')) {
console.log("-----1-up-----");
this.bottomPocket = this.scroller.querySelector('.' + CLASS_PULL_BOTTOM_POCKET);
if (!this.bottomPocket) {
this.bottomPocket = this._createPocket(CLASS_PULL_BOTTOM_POCKET, options.up, CLASS_LOADING);
this.scroller.appendChild(this.bottomPocket);
}
this.bottomLoading = this.bottomPocket.querySelector('.' + CLASS_PULL_LOADING);
this.bottomCaption = this.bottomPocket.querySelector('.' + CLASS_PULL_CAPTION);
//TODO only for h5
this.wrapper.addEventListener('scrollbottom', this);
}
},

2016-10-18 13:56 分享
已邀请:
fountainhead

fountainhead

.mui-pull-top-pocket{top:44px;} 样式加在父级会生效。

fountainhead

fountainhead

一般有头部我会加上.mui-pull-top-pocket{top:44px;} google调试可以看到 等待文字style 一般看看元素是否存在,层级 距离 定位。

  • fan1130work@163.com (作者)

    alert(mui(".mui-pull-top-pocket")[0]);跳出undefined,在_initPocke内插入测试的alert手机上也没有弹框,PC浏览器倒是正常的。

    2016-10-18 14:44

  • fountainhead

    回复 fan1130work@163.com:页面结构是单页的还是用的有子页面。

    2016-10-18 14:47

  • fan1130work@163.com (作者)

    回复 fountainhead:有下拉刷新的是index.hml的一个子页面。

    2016-10-18 14:50

  • fountainhead

    有代码不

    2016-10-18 15:04

  • fan1130work@163.com (作者)

    回复 fountainhead:有的,评论发你?要不加下QQ(329564402)传你,麻烦您帮我看看?

    2016-10-18 15:10

  • fountainhead

    fountianheadchen@gmail.com

    2016-10-18 15:16

  • fan1130work@163.com (作者)

    ------------index.js代码:---------------------------------
    ....省略....
    mui.init({
    preloadPages:[
    {
    url:'login.html',
    id:'login'
    },
    {
    url:'setting.html',
    id:'setting'
    }
    ]
    });
    var token = '',
    subpages = ['news_list.html', 'weather.html', 'monitor.html', 'alarmIndex.html'],
    subpage_style = {
    top: '50px',
    bottom: '51px'
    },
    aniShow = {};

    ....省略....
    -----------------newslist.js子页面代码-----------------------
    mui.init({
    gestureConfig:{
    tap:true //默认为true 点击事件
    },
    pullRefresh:{
    container:'#pullrefresh',
    down:{
    auto: true,
    contentrefresh:'正在刷新...',
    callback:listUtil.pulldownRefresh
    },
    up:{
    contentrefresh:'正在加载...',
    contentnomore:"没有更多数据了",
    callback:listUtil.pullupRefresh
    }
    },
    preloadPages:[{
    url:'news_page.html',
    id:'newsPage'
    }]
    });
    ....省略....

    -----------------------news_list.html页面结构-------------------
    <body>
    <!--下拉列表容器-->
    <a name="gototop"></a>
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper" ">
    <div class="mui-scroll ">
    <div id="slider " class="mui-slider ">
    <div class="mui-slider-group ">
    <div class="mui-slider-item ">
    <a href="# ">
    <img src="../images/bhebanner.png ">
    </a>
    </div>
    </div>
    </div>
    <ul class="mui-table-view news-ul ">

    </ul>
    </div>
    </div>
    <script src="../js/mui.js "></script>
    <!--<script src="../js/mui.min.js "></script>-->
    <script src="../js/ipConfigAndUtil.js"></script>
    <!--<script src="js/news/news_list.js "></script>-->
    <script src="../dist/newsList.bundle.js "></script>
    </body>

    2016-10-18 15:19

TR

TR

我也遇到同样的问题,楼上的方法不起作用,同求解!

  • fan1130work@163.com (作者)

    加载的文字不是在子页面里的。是在父页面 HTML中。我的情况是父二面的header把文字挡住了

    2016-10-28 17:18

TR

TR

解决了,方法如下:
在父页面,加一个:
<div class="mui-bar mui-bar-standard mui-bar-header-secondary">
筛选条件
</div>

静候

静候

请问下这行代码有什么作用呢,我还是遇到相同的问题。。。还望告知下,谢谢啦!

  • fan1130work@163.com (作者)

    显示 “正在加载“的文字其实是被加到父页面里了。所以看看index.html

    2016-12-05 10:52

四阿哥

四阿哥

感谢!不过dcloud论坛比ionic冷了好多,一大堆问题没人理睬!

wenxinpan@yeah.net

wenxinpan@yeah.net

我的是因为.mui-pull-top-pocket这个元素的top值太高了,这个提示文字被子界面遮挡了所以才看不见。在父元素更改一下它的top值就能看见了。

var elePullTopPocket = document.querySelector(".mui-pull-top-pocket");
if(elePullTopPocket)
elePullTopPocket.style.top = "0";

要回复问题请先登录注册