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找不到官方解决方法，只能靠偶然间的灵感。