移动端滑动加载

最新推荐文章于 2023-07-20 09:51:35 发布

weixin_33694172

最新推荐文章于 2023-07-20 09:51:35 发布

阅读量186

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/xiaoqiong-li/p/11009533.html

版权

页面css

            ul li{
                height: 140px;
                font-size: 18px;
                background:#eee ;
            }
            #loading{
                display: none;
                margin:0 auto;
                text-align: center;
                padding: 15px 0;
            }

页面html

页面主要两个盒子，一个放加载的数据，一个放加载时的提示用的。

           <ul id="list"></ul>
           <div id="loading"></div>

页面JQuery

加载的临界是页面滑动到内容的底部时加载下一页内容

var resList = {data:[{num:'1'},{num:'2'},{num:'3'},{num:'4'},{num:'5'},{num:'6'},{num:'7'},{num:'8'},{num:'9'},{num:'10'}]}//模拟数据
            var indexPage = 1;//当前页
            var pageNum = 4;//一页显示多少条数据
            var pageMax = 0;//共有多少页
            var off_on = true;//滑动加载开关，防止循坏加载
            
            var dataList=resList.data;
            pageMax = dataList.length%pageNum?parseInt(dataList.length/pageNum)+1:dataList.length/pageNum;
            console.log('总页数：'+pageMax)
            xhtml(1);//进入页面时预加载
            
            $('#list').on('touchstart', function (e) {
                    if (!off_on) {
                        off_on = !off_on;
                    };
            });
            $('#list').on('touchmove',function(e){
                
                        
                             
                    if (($(document).scrollTop() + $(window).height())>= $(document).height()) {//判断是否滑到内容底部
                         
                            if(off_on){
                                
                                console.log(indexPage)
                                $('#loading').show().html("<img src='./img/loading.gif'>")
                                    
                                setTimeout(function(){
                                    
                                    indexPage++;
                                    $('#loading').hide()
                                    console.log(off_on)
                                    xhtml(indexPage);
                                    
                                },1000)
                                
                                    off_on = !off_on;
                                
                            }
                        
            
                    }
                    
                
            })
            
            //列表内容循环
            function xhtml(indexPage){
            var xhtml='';
            if(dataList.length>0 & dataList!=null & dataList!=''){
                
                if(indexPage > pageMax){
                    $('#loading').show()
                    $('#loading').html('没有更多了~')
                    
                    setTimeout(function(){
                        $('#loading').hide()
                    },2000)
                }else{
                    var data = dataList.slice((indexPage-1)*pageNum,indexPage*pageNum)
                    for(var i=0;i<data.length;i++){
                    xhtml+='<li>'+data[i].num+'</li>'
                }
                }
                
                $('#list').append(xhtml);
            }else{
                
                $('#list').html('空空如也~~');
                
            }
                
            
                
                
            }