mui的下拉重新整理的用法及其解決雙滾動的辦法

lily000000發表於2017-11-29
UI

內容頁面需統一按照如下 DOM 結構構建

<!--下拉重新整理容器-->
<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>複製程式碼

其次，通過 mui.init 方法中 pullRefresh 引數配置下拉重新整理各項引數，如下：

    <script>
      mui.init({
          pullRefresh : {
            container:"#refreshContainer",//下拉重新整理容器標識，querySelector能定位的css選擇器均可，比如：id、.class等
            down : {
              height:50,//可選,預設50.觸發下拉重新整理拖動距離,
              auto: true,//可選,預設false.首次載入自動下拉重新整理一次
              contentdown : "下拉可以重新整理",//可選，在下拉可重新整理狀態時，下拉重新整理控制元件上顯示的標題內容
              contentover : "釋放立即重新整理",//可選，在釋放可重新整理狀態時，下拉重新整理控制元件上顯示的標題內容
              contentrefresh : "正在重新整理...",//可選，正在重新整理狀態時，下拉重新整理控制元件上顯示的標題內容
              callback :pullfresh-function //必選，重新整理函式，根據具體業務來編寫，比如通過ajax從伺服器獲取新資料；
            }
          }
});
    </script>複製程式碼

下拉重新整理當資料較多時可能會出現雙滾動條，解決辦法如下

mui('.mui-scroll-wrapper').scroll({
    deceleration: 0.1, //flick 減速係數，係數越大，滾動速度越慢，滾動距離越小，預設值 0.0006 
    indicators: false  //隱藏一條滾動條 增大減速係數。。。
});複製程式碼

相關文章