多个tab上拉分页加载更多

[zuoluo11]

如示例5中那样，一个页面，上方有多个tab可以切换，下方是card样式，点击tab可以切换，上拉后加载更多实现分页功能。 遇到的问题： 1、如果跳转到当前页面时，默认选择tab索引是2的（默认是0）,会在tab为2的下方加载数据，而数据则包括索引是0和索引是2的，也就是说，默认加载tab0的数据和手工切换tab2的数据全部显示。

解决方法： 1、首先配置自动加载关闭。 autoLoad: false 2、获得当前页面需要自动切换的tab索引。 $('.tabs span').eq(tabType - 1).trigger("click"); 3、打开自动加载开关并重置。 dropload.opts.autoLoad = true;
dropload.resetload();

这样在切换到当前tab后，数据可以显示正常。 这个插件的使用不是很了解，试了试，这样可以解决。 留给需要的朋友吧。

[huan0118]

我这实际中的5个tab切换各种问题 我这是带两个参数请求的一个是不同类型 一个是页数；有没有详细例子给参考下 @zuoluo11 @ximan

[zuoluo11]

能直接运行的代码我这没有整理，这个是我项目里面的，你可以参考，三个选项卡，每个显示的内容不同 var tabsSwiper;//滑动插件 var dropload;//上拉分页 var itemIndex = 0; var tabLoadEnd = new Array(3); tabLoadEnd[0] = tabLoadEnd[1] = tabLoadEnd[2] = false; $(function () { //上拉分页 initDropload(); }) //初始化上拉分页 function initDropload() { var num = 3; // 每页展示4个 var counter = new Array(3);//当前页 counter[0] = counter[1] = counter[2] = 1; dropload = $('.swiper-wrapper').dropload({ scrollArea: window, autoLoad: false, domDown: { domClass: 'dropload-down', domRefresh: '

', domLoad: '

', domNoData: '

' }, loadDownFn: function (me) { $.ajax({ type: 'GET', url: serviceUrl, dataType: 'json', data: { Method: 'GetWeiXinOrderCard', ItemIndex: itemIndex,//选项卡索引 PageIndex: counter[itemIndex]++,//当前页 PageSize: num //每页大小 }, success: function (data) {

               // console.log(" 选项卡索引" + itemIndex + "data索引" + data.itemIndex + "总数" + data.total + "当前页" + counter[itemIndex] + " 当前页记录数" + data.rowcount);
                if (itemIndex != data.itemIndex) {
                    //切换选项卡过快，手动数据添加到实际请求选项卡
                    itemIndex = data.itemIndex;
                }
                var result = '';
                for (var i = 0; i < data.rows.length; i++) {

                    result += getCardHtml(data.rows[i]);//拼接card的html
                }
                $('.swiper-slide .list').eq(itemIndex).append(result);

                if ((counter[itemIndex] - 1) * num > data.total) {
                    tabLoadEnd[itemIndex] = true;   // 数据加载完
                    me.lock();//锁定
                    me.noData();//无数据
                }
                // 每次数据加载完，必须重置
                me.resetload();
                //counter[itemIndex]++;//当前页
            },
            error: function (xhr, type) {
                me.resetload();
            }
        });
    }
});

}

[huan0118]

多谢 @zuoluo11

[hiYoHoo]

tab页切换的时候要重置一下：dropload.resetload(); $(document).on('click', '.pub-tab .tab-item', function(){ tabIndex = $(this).index(); $(this).addClass('selected').siblings().removeClass('selected'); $('.tab-cont').addClass('hide'); $('.tab-cont').eq(tabIndex).removeClass('hide'); if(tabLoadEnd[tabIndex]){ // 锁定 dropload.lock('down'); dropload.noData(); }else{ // 解锁 dropload.unlock(); dropload.noData(false); } dropload.resetload(); });