gothle
gothle
  • 发布:2016-08-30 09:29
  • 更新:2016-09-07 16:13
  • 阅读:2912

关于选项卡切换的列表下拉刷新和上拉加载更多。

分类:MUI

功能需求是这样的,我在mui.plusReady里面进行第一次数据请求,当数据不足十条的时候,我需要调用mui('#pullup-container').endPullUpToRefresh(true);方法禁止上拉加载的功能。但是我不清楚多列表刷新的时候,应该怎么设置多个
> container:refreshContainer,//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等

属性?
我在html页面写了id属性,然后只设置了一个,然后调用mui('#pullup-container').endPullUpToRefresh(true);方法,报错,找不到这个方法。
请不惜指教。多谢

2016-08-30 09:29 负责人:无 分享
已邀请:
5***@qq.com

5***@qq.com

楼主处理出来了吗?求告知,谢谢!

  • gothle (作者)

    mui告知用选项卡切换div的方法无法设置 container:refreshContainer。我现在是自己写的方法实现的。

    2016-09-07 09:20

  • 5***@qq.com

    好的,谢谢!

    2016-09-07 10:35

赵梦欢

赵梦欢 - 专注前端,乐于分享!

不好意思,选项卡切换+下拉刷新确实不存在disablePullupToRefresh()的方法,先临时通过隐藏tips实现吧,完全的隐藏也不好,毕竟用户如果需要上拉呢?

  • 5***@qq.com

    @DCloud_客服_小青年:(⊙o⊙)…,我试了多次了,根本不能临时隐藏啊?是什么原因?

    2016-09-07 15:44

  • 赵梦欢

    回复 5***@qq.com: 你是使用我发的吗

    2016-09-07 15:45

  • 5***@qq.com

    回复 赵梦欢:是的!而且还在官方的demo用了你发的代码一字不差的打进去了,把上面加载的内容减少到7条,就是下面还是显示上拉显示更多?

    2016-09-07 15:56

  • 赵梦欢

    回复 5***@qq.com: 我这怎么不会呢,我发一个测试工程上来。

    2016-09-07 16:05

  • 5***@qq.com

    回复 赵梦欢:好的!我再去试试!

    2016-09-07 16:23

  • 5***@qq.com

    回复 赵梦欢:可以了,少写了auto:true 初始化自动刷新上拉加载。写了这个自动刷新上拉加载,我前面页面通过ajax自动加载的出来数据就会用不了上拉加载和下拉刷新了,动都动不了,这是什么情况?

    2016-09-07 20:57

Trust

Trust - 少说废话

上拉加载

mui('#pullup-container').pullRefresh().enablePullupToRefresh();  
  • gothle (作者)

    单列表刷新的我会,但是选项卡里面有多个刷新列表,这种应该如何进行初始化?

    2016-08-30 09:38

  • Trust

    回复 gothle:参考Hello mui中的pullrefresh_with_tab.html。

    2016-08-30 09:40

  • gothle (作者)

    回复 Trust:看过很多遍了,但是这个里面没有进行container属性的设置,所以我不是很清楚该怎么设置这个属性。我需要设置这个属性在其他的方法里面调用。

    mui.init();

    (function($) {

    //阻尼系数

    var deceleration = mui.os.ios?0.003:0.0009;

    $('.mui-scroll-wrapper').scroll({

    bounce: false,

    indicators: true, //是否显示滚动条

    deceleration:deceleration

    });

    $.ready(function() {

    //循环初始化所有下拉刷新,上拉加载。

    $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {

    $(pullRefreshEl).pullToRefresh({

    down: {

    callback: function() {

    var self = this;

    setTimeout(function() {

    var ul = self.element.querySelector('.mui-table-view');

    ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);

    self.endPullDownToRefresh();

    }, 1000);

    }

    },

    up: {

    callback: function() {

    var self = this;

    setTimeout(function() {

    var ul = self.element.querySelector('.mui-table-view');

    ul.appendChild(createFragment(ul, index, 5));

    self.endPullUpToRefresh();

    }, 1000);

    }

    }

    });

    });

    var createFragment = function(ul, index, count, reverse) {

    var length = ul.querySelectorAll('li').length;

    var fragment = document.createDocumentFragment();

    var li;

    for (var i = 0; i < count; i++) {

    li = document.createElement('li');

    li.className = 'mui-table-view-cell';

    li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));

    fragment.appendChild(li);

    }

    return fragment;

    };

    });

    })(mui);

    2016-08-30 09:49

  • 5***@qq.com

    回复 Trust:如何禁止上拉加载更多的功能,求告知,谢谢!

    2016-09-06 20:15

  • 赵梦欢

    回复 5***@qq.com: mui('#pullrefresh').pullRefresh().disablePullupToRefresh();//禁用上拉加载

    2016-09-06 20:36

  • 5***@qq.com

    回复 赵梦欢: mui('#pullrefresh').pullRefresh().disablePullupToRefresh();//禁用上拉加载,这个在切换选项卡中是报错了,错误代码为: Uncaught TypeError: Object #<Object> has no method 'PullRefresh',因此猜测会不会是mui.pullToRefresh.js中没有提供disablePullupToRefresh()这个方法?求告知,谢谢!

    2016-09-07 10:56

该问题目前已经被锁定, 无法添加新回复