采用JS实现ZBLOG PHP程序分页下拉加载效果
ssr
撰写于 2022年 02月 26 日

在页面实现下拉加载更多的功能,是一项非常方便且常见的功能,其实质就是相当于加载更多的按钮,实现假分页,只显示自己规定的内容,其余部分隐藏。如果还有数据,点击下加载更多,直到没有更多数据了,就会显示加载完毕。这个功能对于手机页面尤其友好,但是Zblog本身并未自带此项功能,从其他网站的实现办法来看,大都可以通过修改JS代码参数的的办法来实现。废话不多说,我们直接上代码开始操作。
首先,下载infinite-scroll.js文件
我们需要去infinite-scroll的官网下载一个infinite-scroll.js文件,网址是http://www.infinite-scroll.com/。文件完成下载以后,在zblog模板头部引入该js文件,同时需要提醒注意的是必须要有jquery库(一般主题都会引入jquery库,如果真有主题没有引入请自行引入。)
第二步:引入正确的js代码



第三步:修改pagebar.php

PS:上面的js设置参数一般只用设置前三项即可,后面的都是个性化设置,可按照自身需求修改。完成以上四步,保存好相关文件,后台首页更新下缓存我们就能看到效果了。

采用JS实现ZBLOG PHP程序分页下拉加载效果

在页面实现下拉加载更多的功能,是一项非常方便且常见的功能,其实质就是相当于加载更多的按钮,实现假分页,只显示自己规定的内容,其余部分隐藏。如果还有数据,点击下加载更多,直到没有更多数据了,就会显示加载完毕。这个功能对于手机页面尤其友好,但是Zblog本身并未自带此项功能,从其他网站的实现办法来看,大都可以通过修改JS代码参数的的办法来实现。废话不多说,我们直接上代码开始操作。
首先,下载infinite-scroll.js文件
我们需要去infinite-scroll的官网下载一个infinite-scroll.js文件,网址是http://www.infinite-scroll.com/。文件完成下载以后,在zblog模板头部引入该js文件,同时需要提醒注意的是必须要有jquery库(一般主题都会引入jquery库,如果真有主题没有引入请自行引入。)
第二步:引入正确的js代码



第三步:修改pagebar.php

PS:上面的js设置参数一般只用设置前三项即可,后面的都是个性化设置,可按照自身需求修改。完成以上四步,保存好相关文件,后台首页更新下缓存我们就能看到效果了。

赞 (0)

猜您想看

评论区(暂无评论)

这里空空如也,快来评论吧~

我要评论