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);

posted @ 2019-04-11 10:53  北执666  阅读(1341)  评论(0编辑  收藏  举报