mui 上拉加载／下拉刷新异常 双滚动条异常

在写上篇随笔的时候，突然想起来以前总结过的东西，拿出来分享下

遇到问题：

1.上拉加载后，出现没有更多数据。这时候返回顶部:

mui('#refreshContainer').pullRefresh().scrollTo(0, 0, 100);

返回后，页面会消失，其实是页面又回到返回之前的（x,y）   

解决办法：mui('#refreshContainer').pullRefresh().scrollTo(1, 1, 100);

 

2.上拉加载后，出现没有更多数据，这时候下拉刷新：

mui('#refreshContainer').pullRefresh().refresh(true);//重新激活

mui('#refreshContainer').pullRefresh().endPullupToRefresh(noneBol);//关闭刷新

刷新不会结束，也无法继续刷新

解决办法:

mui('#refreshContainer').pullRefresh().endPulldownToRefresh();

mui('#refreshContainer').pullRefresh().refresh(true);

 

3.官方文档下拉刷新结束：

mui('#refreshContainer').pullRefresh().endPulldown();

报错mui(...).pullRefresh().endPulldown()不是function;

解决办法：mui('#refreshContainer').pullRefresh().endPulldownToRefresh();

版本更新了，老的mui.min.js不支持新的官方文档的方法

 

4.上拉下拉刷新都是和刷新容器一起做的

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

  <div class="mui-scroll">

    <!--数据列表-->

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

     

    </ul>

  </div>

</div>

因为我的项目主要是ios，这个同时兼容ios和android

坑1:

如果是超出屏幕需要移动的页面，嵌套在里面的话，发现页面不能移动：

（1）.修改 <div class="mui-scroll”>的over-flow:scroll;坑来了，chrome的手机模式下正常了，到ios手机，页面飞了

（2）.打开mui.init({

    pullRefresh: {

        container: '#refreshContainer'

    }

})

这样就可以了，应该是因为下拉刷新容器的问题

 

5.mui('#refreshContainer').pullRefresh().scrollTo(1, 1, 100)后，滑动页面时会出现两根滚动条，且其中一条达到底部时，页面直接到底；

（1）自己的解决办法：

    mui('.mui-scroll-wrapper').scroll({

    deceleration: 0.1, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值 0.0006 

    indicators: false   //隐藏一条滚动条 增大减速系数。。。

});

（2）好的解决办法：

因为这个scrollto是每次移动的距离，是相对于当前的距离来移动的，而不是移动到绝对的距离。

    let index = $(e.event.target).index();

 let id = $(e.event.target).attr("href");

 let top = $(id).offset().top - 200;

 let current_top = mui('#segmentedControlContents .mui-scroll-wrapper').scroll().y;

 top = current_top - top;

 mui('#segmentedControlContents .mui-scroll-wrapper').scroll().scrollTo(0,top,300);

此解决办法原址http://www.jb51.net/article/111090.htm