ios下容器滚动条滚到底后更新容器内容，内容显示不出来，滑一下屏幕才出来

分类：MUI

iOS

我的首页分两部分，一个header和一个list，分别是两个webview，list上显示内容项，点击header能弹出分组，切换分组后能重新加载list中的内容项目。现在问题是这样的，有的分组内容较多能有几十项，有的比较少，就一两项，现在我先切到内容较多的分组，然后在list webview中进行滑动一直滚动到底，然后我再切换到内容较少的分组上，这时ios上list中显示不出来内容了，但手动滑一下屏幕，相应的内容就会从顶部滚出来，安卓下切换到内容较少的分组时，如果有滚动条的话虽然滚动条也会留在底部，但不会有ios那样有内容没显示在当前屏幕的情况出现。
ios下就算我在代码里调用一下window.scrollTo方法也不生效，安卓下掉用相同的方法是可以用代码控制滚回顶部的。ios下这个滚动条应该怎么控制呢？我代码中用来放内容项的代码如下：

        <div  class="mui-content" >  
            <ul id="container" class="mui-table-view mui-table-view-chevron" style="margin-top:0px;">  
                </ul>  
        </div>

设置container的内容时调用的是jQuery的html()方法。

2015-10-16 11:08 负责人:无分享

6 个回复

DCloud_UNI_CHB

建议上传一个能重现问题的完整示例demo；

叶孤村 (作者)

@DCloud_MUI_CHB 实在抱歉！原帖中提供的代码不能重现，当时没想过下拉刷新会有问题，特意把那些代码去了，实际的HTML是这样的：

        <div id="list" class="mui-content mui-scroll-wrapper">  
            <div class="mui-scroll">  
                <ul id="container" class="mui-table-view mui-table-view-chevron" style="margin-top:0px;">  
                </ul>  
            </div>  
        </div>

附件中提供了完整的demo，目前确定应该就是下拉刷新、或者区域滚动控件的问题（安卓下正常，IOS下有问题）。运行程序后，先点击header上的“30项”按钮，展示出内容后将列表中的内容滑到底，然后再点击“3项”按钮，IOS下会发现列表中为空，然后再滑一下屏幕，内容就从顶部出来了，如果直接使用如下最简单的形式是正常的。

        <div  class="mui-content" >  
            <ul id="container" class="mui-table-view mui-table-view-chevron" style="margin-top:0px;">  
                </ul>  
        </div>

下拉刷新相关的dom结构都是和 http://dev.dcloud.net.cn/mui/pulldown/ 一致的

ListDemo.zip

DCloud_UNI_CHB

因为iOS平台的下拉刷新使用了区域滚动，刚开始30项内容时，滚动到最底部，然后再变成3项内容时，页面还处于滚动区域的最下方，因此需要你在切换内容项时，手动调用一下pullRefresh插件的scrollTo方法，将scroll组件滚动到顶，代码如下：

function fillContainer(count){  
    var result = []  
    for(var i = 0; i < count; i++){  
        var item = generateItem();  
        result.push(item);  
    }  
    var htm = result.join("");  
    mui("#list").pullRefresh().scrollTo(0,0,10);  
    $("#container").html(htm);  
}

下拉刷新的滚动函数，参考：http://dev.dcloud.net.cn/mui/pulldown

liangyue

scrollTo 这个方法在安卓下面感觉很慢，第三个参数设置成0还是很慢的滚上去，这是怎么回事呢

2015-10-20 22:58
DCloud_UNI_CHB

回复 liangyue:mui版本是多少？最新是mui v2.5.0，之前有个版本是滚动很慢

2015-10-20 23:02
liangyue

回复 DCloud_UNI_CHB: 我今天升到2.5了，使用的场景和楼主一样，好像没感觉有快啊，是我手机太差了吗

2015-10-20 23:05

liangyue

还有个问题列表的类型切换，比如我一个列表加载了部分数据，点击某个按钮加载另一种类型的列表数据，我是将列表的数据清空，加载新的数据，如果这时候这种类型的数据一条也没有的时候，页面会显示个上拉加载更多这几个字请问怎么去掉

叶孤村 (作者)

我这使用的是下拉刷新，倒是没有这种问题

2015-10-21 10:16
DCloud_UNI_CHB

回复叶孤村:这时候禁用上拉加载就可以了，参考：http://dev.dcloud.net.cn/mui/pullup/#disablePullupToRefresh

2015-10-21 22:25

叶孤村 (作者)

@DCloud_MUI_CHB 原来程序中mui版本是2.0.0，设为0时确实滚动上去的时候很慢，换成2.5之后发现有新问题了。。原来代码中类似mui(".mui-bar").off('tap', '#btn');这种方式取消事件的地方全都报错了，报的错如下：
Uncaught TypeError: Object #<error> has no method 'forEach' at js/mui.js:1025
从$.fn.off方法中报出来的。

houfeng2016

在什么情况下出理的这个错误？

2015-10-21 14:52
叶孤村 (作者)

mui(".mui-bar").off('tap', '#btn');就这么直接调用就报错了，原来用的2.0没问题

2015-10-21 14:57
叶孤村 (作者)

换了最新的mui报错

2015-10-21 14:58
叶孤村 (作者)

回复 houfeng2016:如果还没有执行过mui(".mui-content").on()就直接执行off的话就会报错，已经执行过on，再执行off没报错

2015-10-21 15:06
houfeng2016

回复叶孤村: 问题已修复，请等待更新吧。

2015-10-21 15:10

叶孤村 (作者)

哎，由于换最新版本mui出现了别的问题，感觉风险有点大，所以就还是在旧的2.0.0上鼓捣，后来发现是2.0下mui中pullRefresh().scrollTo()内部有问题，pullRefresh().scrollTo()内部调用的是$.scrollTo()方法，然后发现是mui的pullRefresh().scrollTo()调用$.scrollTo()时参数传递错了。。

$.scrollTo = function(scrollTop, duration, callback) {  
        duration = duration || 1000;  
......  
    };

上面是$.scrollTo的定义，但$.PullRefresh控件中调用这个方法时是这么调的:

scrollTo: function(x, y, time) {  
            $.scrollTo(x, y, time);  
        },

所以$.scrollTo执行的时候，外面传进来的x，其实被当成了y，外面传进来的y被当成了时间，而时间被当成了回调函数。。而y传0后，时间便被设成了1000（duration = duration || 1000;），这时候滚动就会很慢，同时还报了个错：
Uncaught TypeError: Object #<error> has no method 'forEach' at js/mui.js:1025
最新版本中的mui已经修正了这个问题，$.PullRefresh中的调用改成了如下：

scrollTo: function(x, y, time) {  
            $.scrollTo(y, time);  
        },

这样参数没有错乱了，但程序中现在mui暂时还用2.0，所以只能先这么调用了：
mui("#list").pullRefresh().scrollTo(0, 1);
回头等最新版本mui用的没问题了再来调整

DCloud_UNI_CHB

老版本的scrollTo方法确实有那个bug，你说的mui(".mui-bar").off('tap', '#btn')方法报错的问题，我看一下

2015-10-21 12:39
叶孤村 (作者)

好的，谢谢了！

2015-10-21 13:54
DCloud_UNI_CHB

mui(".mui-bar").off('tap', '#btn')方法报错的问题，已修订，并更新了github，地址：https://github.com/dcloudio/mui

2015-10-21 16:46
叶孤村 (作者)

好的！

2015-10-21 16:50
Miaosem

回复 DCloud_UNI_CHB:为什么我安卓使用

mui("#content_scroll").scroll().scrollTo(0, -128,1000);

滚动完后会回退到最顶端的内容区域是bug吗？

若是先用手全部区域滚动一遍再执行

mui("#content_scroll").scroll( ).scrollTo(0, -128,1000)

就正常了

2016-01-04 14:12

该问题目前已经被锁定, 无法添加新回复

ios下容器滚动条滚到底后更新容器内容，内容显示不出来，滑一下屏幕才出来

6 个回复

公告

相关问题

ios下容器滚动条滚到底后更新容器内容，内容显示不出来，滑一下屏幕才出来

与内容相关的链接

6 个回复

公告

相关问题