ourphp v1.8.2 看点之 移动端网站采用AJAX翻页

升级到1.8.2后, 移动端翻页全部采用了AJAX技术.
页面向下拉动 自动加载翻页数据.

去掉了传统的点击翻页,提生了用户体验.

AJAX翻页配置代码:
可在LIST列表页模板中使用

1.    <script type="text/javascript">
   
2.                                 $(function(){
   
3.                                         $(".noacc").hide();
   
4.                                 });
   
5.                                 var op_page = 2; //从第2页开始加载
   
6.                                 var op_limit = 0; //0=按后台设置否侧按这里设置
   
7.                                 var op_model = '[.$ip.type.]'; //获取栏目类型
   
8.                                 var op_classid = [.$ip.listid.]; //获取栏目ID
   
9.                                 var op_lang = 'cn'; //设置语言
   
10.                                 var op_typeclass = ''; //产品附加属性
    
11.                                 $(window).scroll(function() {
    
12.                                                 var scrollTop = $(this).scrollTop();
    
13.                                                 var scrollHeight = $(document).height();
    
14.                                                 var windowHeight = $(this).height();
    
15.                                                 if (scrollTop + windowHeight == scrollHeight) {
    
16.                                                        
    
17.                                                         $.post("[.$webpath.]function/ourphp_ajax.class.php",{page:op_page,model:op_model,id:op_classid,limit:op_limit,lang:op_lang},function(result){
    
18.                                                                 if(result == 0){
    
19.                                                                         $(".noacc").show();
    
20.                                                                 }else{
    
21.                                                                         $("#op_ajax_page").append(result);
    
22.                                                                         $(".noacc").hide();
    
23.                                                                         op_page += 1;
    
24.                                                                 }
    
25.                                                         },'json');
    
26.                                                        
    
27.                                                 }
    
28.                                 });
    
29.                         </script>

复制代码

具体请参考模板中的实际运用