解决多个tab之间来回切换,iscroll.js 上拉加载更多出现重复请求加载问题

解决多个tab之间来回切换,iscroll.js 上拉加载更多出现重复请求加载问题。解决办法:设置一个标识,每个tab下面的iscroll对象只能初始化一次,这样就解决了。

效果图这样的:

解决多个tab之间来回切换,iscroll.js 上拉加载更多出现重复请求加载问题_第1张图片

 

关键代码,如下:

$('.top >span').on('click',function(){
   if($(this).hasClass('all')){
       page.pageNum_all=1
       $('#alls').show()
       $("#ins .con").empty()
       $("#outs .con").empty()
        console.log('all')
        //myscroll_alls=
        //myscroll_ins=null
        //myscroll_outs=null
        $('#outs').hide()
        $('#ins').hide()
        $("#alls .con").empty()
        if(page.all_flag == false){ //解决iscroll.js 上拉加载更多多次重复加载问题
            myscroll_alls = iscrollObj_all('alls')
            page.all_flag =true
        }

      
     if($("#alls .con >div").length == 0){getVideoList_all(page.pageNum_all)}
   }
   if($(this).hasClass('in')){
       page.pageNum_in=1
        $('#ins').show()
        $("#alls .con").empty()
        $("#outs .con").empty()
        $("#ins .con").empty()
        console.log('in')
        /*myscroll_alls=null
        myscroll_ins=null
        myscroll_outs=null*/
        $('#alls').hide()
        $('#outs').hide()
        
     if(page.in_flag == false){
            myscroll_ins = iscrollObj_in('ins')
            page.in_flag =true
        }
     if($("#ins .con >div").length == 0){getVideoList_in(page.pageNum_in)}
   }
   if($(this).hasClass('out')){
       page.pageNum_out=1
       $('#outs').show()
       $("#alls .con").empty()
       $("#ins .con").empty()
       $("#outs .con").empty()
        console.log('out')
        /*myscroll_alls=null
        myscroll_ins=null
        myscroll_outs=null*/
        $('#alls').hide()
        $('#ins').hide()
     if(page.out_flag == false){
            myscroll_outs = iscrollObj_in('outs')
            page.out_flag =true
        }
     if($("#outs .con >div").length == 0){getVideoList_out(page.pageNum_out)}
   }
})

 

原代码备注:

//事件
//游戏列表bar切换
$('.game-bar >span').on('click',function(){
   if($(this).hasClass('all')){
       $(this).addClass('active').siblings().removeClass('active')
       page.pageNum_all=1
       $('#alls').show()
       $("#ins .con").empty()
       $("#outs .con").empty()
        console.log('all')
        $('#outs').hide()
        $('#ins').hide()
        $("#alls .con").empty()
        if(page.all_flag == false){ //解决iscroll.js 上拉加载更多多次重复加载问题
            myscroll_alls = iscrollObj_all('alls')
            page.all_flag =true
        }
      
     if($("#alls .con >div").length == 0){getVideoList_all(page.pageNum_all)}
   }
   if($(this).hasClass('reward')){
       $(this).addClass('active').siblings().removeClass('active')
       page.pageNum_reward=1
        $('#rewards').show()
        $("#alls .con").empty()
        //$("#outs .con").empty()
        $("#rewards .con").empty()
        console.log('reward')
        $('#alls').hide()
        //$('#outs').hide()
        
     if(page.reward_flag == false){
            myscroll_rewards = iscrollObj_reward('rewards')
            page.reward_flag =true
        }
     if($("#rewards .con >div").length == 0){getVideoList_reward(page.pageNum_reward)}
   }
   /*if($(this).hasClass('out')){
       $(this).addClass('active').siblings().removeClass('active')
       page.pageNum_out=1
       $('#outs').show()
       $("#alls .con").empty()
       $("#ins .con").empty()
       $("#outs .con").empty()
        console.log('out')
        $('#alls').hide()
        $('#ins').hide()
     if(page.out_flag == false){
            myscroll_outs = iscrollObj_out('outs')
            page.out_flag =true
        }
     if($("#outs .con >div").length == 0){getVideoList_out(page.pageNum_out)}
   }*/
})

0424日补充:对于外边的包括层,尽量不要用高度来写死,最好用position定位 。这样能适应大小不同的屏幕高度

你可能感兴趣的:(前段常用小功能)