标签：indexPage dataList off num var 滑动 移动 加载

页面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('空空如也~~');
                
            }
                
            
                
                
            }

在练习过程写的dom，写的不好的地方望多多提出。

标签：indexPage,dataList,off,num,var,滑动,移动,加载
来源： https://www.cnblogs.com/xiaoqiong-li/p/11009533.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。