免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码

标题: ourphp v1.8.2 看点之 移动端网站采用AJAX翻页 [打印本页]

作者: admin    时间: 2018-5-24 19:08
标题: 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>
复制代码
具体请参考模板中的实际运用





欢迎光临 免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码 (http://www.ourphp.net/club/) Powered by Discuz! X3.2