专注于YzmCMS建站

提供YzmCMS模板、整站源码、插件下载,分享YzmCMS使用教程。
承接YzmCMS仿站 · 网站定制 · 网站修改 · 技术问题解决 · SEO优化业务。
仿站请加QQ3084218316(价格100元起。任何网站都能仿,即使目标站不是yzmcms)
    yzmcms下拉异步加载数据插件
  • 使用程序  YzmCMS
  • 插件来源  yzmcms论坛
  • 发布时间  2020-07-13
  • 所属栏目  首页 > yzmcms插件
  • 此插件收集于第三方网站。若您需要此插件,请点击下方按钮跳转到第三方网站了解详情。
  • 前往查看

YzmCMS系统自带分页功能,在手机版的体验似乎不是很友好,鉴于大家的建议,出一款下拉异步加载更多数据插件,本插件不限于手机版,在PC中同样适用。


实现原理很简单,就是ajax异步请求而已:

局部代码:

            $.ajax({
                type: 'GET',
                url: '{U('index/api/init')}?catid={$catid}&page='+page+'&page_start='+pageStart,
                dataType: 'json',
                success: function(data){
                    var result = '';
                    counter++;
                    pageEnd = page * counter;
                    pageStart = pageEnd - page;
                    var arrLen = data.length;
                    if (arrLen > 0) {
                        //data里数据字段有:id,catid,inputtime,updatetime,title,url,thumb,click,nickname,description
                        for (var i = 0; i < arrLen; i++) {
                            result +=   '<li><a href="'+data[i].url+'">'
                                        +'<img src="'+data[i].thumb+'" alt="'+data[i].title+'">'+data[i].title
                                        +'</a></li>';
                        }
                    } else {
                        me.lock(); // 锁定
                        me.noData();  // 无数据
                    }
                    $('.lists').append(result);
                    // 每次数据加载完,必须重置
                    me.resetload();
                },
                error: function(xhr, type){
                    // alert('Ajax error!');
                    // 即使加载出错,也得重置
                    me.resetload();
                }
            });
        }


最终效果:

YzmCMS 下拉异步加载数据插件免费下载


(本文由 YzmCMS教程网 管理员 整理发布)

模板推荐
相关教程

© YzmCMS教程网(www.551268.com)

yzmcms模板 yzmcms教程 yzmcms仿站 yzmcms插件

法律声明:本站部分信息收集于网络,已尽量标明来源。若有侵权或遗漏,请联系客服删除,谢谢合作!