mui上拉加載/下拉刷新異常


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>

坑1:
如果是超出屏幕需要移動的頁面,嵌套在里面的話,發現頁面不能移動:
(1)修改 <div class="mui-scroll”>的over-flow:scroll;
(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);


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM