兔源码网 - 专注DZ模版分享、DZ插件分享!

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)皆为提供免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需充值兔币购买会员组方可下载),用户仅需手动前往【申请下载权限】申请用户组下载权限即可,如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

【转载,未测试】discuz DIY模块 图文加载更多

[复制链接]
tuyuanma 发表于 2018-11-12 15:35:29 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


说明:一般DIY的时候,都是指定显示几条数据,此方法就是让DIY模块能够实现点击加载更多功能
) O( Z2 \7 a# E( U3 o小白教程,大神绕道...
1 n( l, u9 P8 l% S( e7 ?" L, E- v8 C$ d2 r' G
闲话少说,一会还得去徒步
, u  H* o2 ]6 X. l6 f5 \  F' R
6 x. Z# N4 P! o- e& w6 h" Z1:新建个DIY模块,调用帖子或文章数据 将以下代码加入【模块模板】中:
% V- Z; D  \- T1 s9 D- B1 `% f
  1. <div class="post_list cl" pagenum="12">! s, A1 ]) r: H& J! `) S% Q
  2. [loop]# e/ t/ ~) W, {# x( W/ ~9 u
  3. <div class="article_list">
    % L5 G4 l2 W+ |5 Z( E7 q3 V
  4. <div class="post_grid">1 z2 ~2 C5 S. B
  5. <div class="img">- s3 l8 y3 i8 R% D
  6. <a href="{url}"{target}>
    5 N7 ?  [0 @4 H9 v* r( X9 ^  ^6 i
  7. <img src="模板目录/loadpic.png" data-echo="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" />" E- v2 m4 @- ]2 E4 e" x' G5 q
  8. </a>
    ' Z( F/ q* x8 E( ^/ {
  9. </div>6 P: J$ j" b0 {
  10. <div class="content">
    4 s! s9 H4 x/ w" _5 q- r
  11. <div class="meta hidden-xs">
    % l( t9 |1 C$ O. R3 D
  12. <span class="u-categories"><a href="{caturl}">{catname}</a></span></div>
    ' S( W8 R2 ~# y+ A( U
  13. <div class="title"><h2><a href="{url}">{title}</a></h2></div>1 \1 e/ I) Q' S3 ~. B+ R: W  H
  14. <div class="data clearfix">
    / _6 P* ~& a9 `& Z* ^+ b& j* e
  15. <span class="u-time">{dateline}</span>2 c2 w! R+ g7 c5 P
  16. <span class="u-view"><i class="fa fa-eye"></i>{viewnum}</span>
    8 q5 p" o  w# f' `  T6 \& C
  17. <span class="u-comment"><i class="fa fa-comment-o"></i>{commentnum}</span>
    8 j3 x3 h) O" d" G$ B9 i: j5 v
  18. <span class="u-user y"><i class="fa fa-user-o"></i>{username}</span>8 h% p0 E/ B" K( R
  19. </div>
    ; y% q+ z; D7 F- l& L
  20. </div>
      R( Y: `; ?5 p5 k6 C
  21. </div>8 I8 q/ ?1 S. ]3 l
  22. </div>& t) m, B0 _, @# a: |  `0 I
  23. [/loop]
    % t% b+ H# }; u; r7 {
  24. </div>
    ) {' d7 l) G3 L- z2 L
  25. <div class="ajaxmore_btn"><a class="load-more">加载更多</a></div>
    1 I% P) z3 k- p1 f8 R
  26. <div class="morelink" style="display: none;"><a class="load-more">没有更多了</a></div>
复制代码

6 T: Z# _5 T; d* t
- X& y0 O5 C2 _7 i8 y3 |4 d2:引入JS文件,代码如下,可以设置成loadmore.js
  1. # ]- Y1 G3 d. I3 J5 f+ k8 M
  2. [code]jQuery(document).ready(function() {3 M. g5 ^$ ?0 W4 t8 n
  3.     var post_list = function(jQuerychildren, n) {
    + v% Z. w1 S+ ~# O/ B( p* y8 L
  4.         var jQueryhiddenChildren = jQuerychildren.filter(":hidden");2 R* I9 G7 [' p2 j+ Q
  5.         var cnt = jQueryhiddenChildren.length;
    $ b, N, x! I' O2 A% G, ?6 I
  6.         for (var i = 0; i < n && i < cnt; i++) {
    ; H' W+ a( z1 Z* b9 x2 ]1 ~% g
  7.             jQueryhiddenChildren.eq(i).fadeIn(300);6 _$ N' h0 r; d/ F( p

  8. 5 k" j0 p" E4 L- K
  9.         }) ~* e$ i0 V9 z& P) j; n0 o
  10.         return cnt - n;
    ! M3 G- ?7 I3 Q
  11.     }
    , `. g6 X8 x! V$ B
  12. 8 L, X3 u; M' t& T
  13.     jQuery(".post_list").each(function() {
    4 U8 w2 Z# {7 G. A9 v( L5 J- h
  14.         var pagenum = jQuery(this).attr("pagenum") || 12;, A$ Q, z+ l: \4 R' }/ V+ T
  15.         var jQuerychildren = jQuery(this).children();' S# R* n& ?+ r4 A1 P+ Y
  16.         if (jQuerychildren.length > pagenum) {; u& }( [1 t) l9 A! ~: S+ e2 [
  17.             for (var i = pagenum; i < jQuerychildren.length; i++) {
    * z8 o1 R( T! ^3 x; x1 Q! ?& y
  18.                  jQuerychildren.eq(i).hide();1 k, y) I% T$ `6 ?
  19.             }# J, Q# _: Z: T
  20.             jQuery(".ajaxmore_btn").click(function() {
    ( }2 @! c' G6 n3 N
  21.                 if (post_list(jQuerychildren, pagenum) <= 0) {
    ' p" K' R" Q; e3 [
  22.            jQuery(".ajaxmore_btn").hide();jQuery(".morelink").show();
    9 h, C4 ~. Z, V5 s+ o
  23.                 };
    " d. d, X* {# ~. n/ u4 ^
  24.             });/ l7 u( l. a3 ?# R
  25.         }
    , e) v  \4 ^/ s- Z2 l3 R0 |' P( j
  26.     });  ~( t  k6 o* m/ N9 z

  27. 4 K8 I' |- o0 N% G/ }3 f& Q
  28. });
    7 h2 D: x/ p4 f
复制代码

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

广告

兔源码网 ( 赣ICP备17001544号 公网安备36112102000036号 )

兔源码 QQ交流群:493651246  GMT+8, 2019-6-21 05:14
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

     
快速回复 返回顶部 返回列表