星点互联edus视频培训演示站

标题: mui 多个tab页实现下拉刷新上拉加载 [打印本页]
作者: admin    时间: 2020-11-30 22:11
标题: mui 多个tab页实现下拉刷新上拉加载
下拉刷新组件的dom结构
  1.    <div id="refreshContainer" class="mui-scroll-wrapper">
  2.      <div id="refreshBox">
  3.        <div class="active" id="tab1"></div>
  4.        <div id="tab2"></div>
  5.        <div id="tab3"></div>
  6.      </div>
  7.    </div>
复制代码

css 被mui坑的- -。。。
  1. /*因为下拉图标位置设置无效  则使用下拉刷新组件样式*/
  2. .mui-pull-top-pocket{
  3.   top: 5rem !important;
  4. }
  5. /*把列表展示在你想要的位置 */
  6. #refreshContainer{
  7. height:100vh;
  8. padding-top: 2.2rem;
  9. padding-bottom: 3rem;
  10. }
复制代码

js逻辑
  1. //多tab页切换时
  2. function onTabChange(){
  3.   $('#refreshBox').css('transform','translate3d(0px, 0px, 0px) translateZ(0px)')//切换时默认滚动到顶部，否则会出现多个tab同时滚动导致其他列表出现问题
  4. mui('#refreshContainer').pullRefresh().refresh(true);//重置上拉加载组件
  5. }

  7. //多个tab共用一个下拉刷新组件
  8.   mui.init({
  9.     pullRefresh: {
  10.       container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
  11.       down: {
  12.         callback: function () {
  13.      //列表刷新完成后，需要及时关闭对应的动画，否则会出现无效的问题
  14.       mui("#refreshContainer").pullRefresh().endPulldownToRefresh();//结束动画
  15.   },
  16.       },
  17.       up: {
  18.         callback:   function () {
  19.   ...
  20.       mui("#refreshContainer").pullRefresh().endPullupToRefresh(false);//上拉加载时false表示还有数据
  21.   },
  22.       },
  23.     },
  24.   });
复制代码









欢迎光临 星点互联edus视频培训演示站 (http://47.100.112.22/demo/edus/) Powered by Discuz! X3.5