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