MUI踩坑记录——上拉加载后隐藏“没有更多了”

需求：

新闻中心页面，新闻以垂直列表展示，要求上拉动态加载新数据。当有新数据时加载数据并显示；当没有新数据时，提示“没有更多了”，并且在1s后消失。

解决方法：

使用MUI上拉加载控件：

mui.init({//说明见官方文档  pullRefresh : {    container:'body',    up : {      height:50,      auto:false,      contentrefresh : "正在加载...",      contentnomore:'没有更多数据了',      callback :moreNews     }  }});function moreNews(){    //count初始化为0，只加载一次新数据    if(count===0){        console.log("上拉加载触发");        count++;        var i=0;        while(i++<4){            //newsString中存放字符串格式的节点，循环添加4次            $("#news-list").append(newsString);        }        this.endPullupToRefresh(false);    }else{        //提示没有更多了        this.endPullupToRefresh(true);          setTimeout(function(){            //1s后提示性文字消失            //这里的类是mui自己添加的一个div，用来显示提示性文字。            $(".mui-pull-bottom-pocket").addClass("hide");        },1000);    }}//css 隐藏样式//这里注意优先级，因为mui会给提示的div添加一个优先级很高的display：block#news-container .hide {    display: none !important;} 

问题：

虽然我们设置了display：none；提示也消失了，但是滚动条并没有动态上滑，而在手动滑动一次后才会正常显示。

最终方法

（1） 修改需求
我参考了很多app后，发现要么是无限数据滑不到底，要么就是不隐藏，保留提示。所以如果我第二个方法不适用的话，可以尝试修改需求。
（2） css动画
这个方法不好叙述，只能将我的思路展示一下：

这是列表容器的html节点。style是mui自动添加的。translate3d的y轴属性是一个随屏幕滑动而动态变化的值，也就是容器顶部距离当前可见区域的距离。通过修改这个值可以让容器上下移动。可以自己在浏览器中调试、修改，观察效果。
所以，思路就是获取到这个值，然后修改样式。
修改原有代码：

//获取容器对象var container = $("#news-container");//这里打印了一个很神奇的字符串，可以体验一下。console.log(container.css("transform"));//获取y轴属性值，不要奇怪要为什么这么处理字符串                        var height = container.css("transform").split(',')[5].replace(')','');//因为height是负值，所以要加40px，即提示div的高度                        var delta = parseInt(height)+40;                        var string = "translate3d(0px, "+delta+"px, 0px) translateZ(0px)";//设置样式                        container.css("transform",string);

现在问题应该解决了。获得y轴属性值的方式很奇怪，也不是我刻意为之，而是获得的字符串就很奇怪。
（3）mui.scrollTo（）方法
这个方法不管用。也不知道为什么，scrollTop()获取到的值永远是0。所以，滚动条在移动端的适配并不是看上去那么美好。

总结

MUI的坑我相信远不仅仅这一处，以后我遇到还会记录下来，希望更多的人不要像我一样，遇到bug找不到官方解决方法，只能靠偶然间的灵感。