<div class="row g-4 morequn"> {qb:tag name="index_qun001" type="qun" mid="-1" order="list" by="desc" rows="6" js="morequn"} <div class="col-sm-6 col-lg-4"> <!-- Card START --> <div class="card"> <div class="h-80px rounded-top" style="background-image:url({$rs.banner}); background-position: center; background-size: cover; background-repeat: no-repeat;"></div> <!-- Card body START --> <div class="card-body text-center pt-0"> <!-- Avatar --> <div class="avatar avatar-lg mt-n5 mb-3"> <a href="{:get_url('msg',-$rs.id)}"><img class="avatar-img rounded-circle border border-white border-3 bg-white" src="{$rs.picurl}" alt=""></a> </div> <!-- Info --> <h5 class="mb-0"> <a href="{$rs.url}">{$rs.title}</a> </h5> <small> <i class="bi bi-person-circle"></i>{$rs.username}</small> <!-- Group stat START --> <div class="hstack gap-2 gap-xl-3 justify-content-center mt-3"> <!-- Group stat item --> <div> <h6 class="mb-0"> {$rs.view}{// :fun('qun@count','bbs_content1',$rs.id)} </h6> <small>热度</small> </div> <!-- Divider --> <div class="vr"></div> <!-- Group stat item --> <div> <h6 class="mb-0">{:fun("count@info",'bbs_content1',['ext_id'=>$rs.id])}</h6> <small>帖子</small> </div> </div> <!-- Group stat END --> <!-- Avatar group START --> <ul class="avatar-group list-unstyled align-items-center justify-content-center mb-0 mt-3 qun_member" data-id="{$rs.id}"> <!--圈子相关联的用户,不能实现标签嵌套,所以移到了下面,这里的外层参数qun_member这是标志给JS做处理的,data-id这是标志圈子ID--> </ul> <!-- Avatar group END --> </div> <!-- Card body END --> <!-- Card Footer START --> <div class="card-footer text-center"> <span class="btn btn-success-soft btn-sm" id="guanzhu" data-id="{$rs.id}"> 关注</span> </div> <!-- Card Footer END --> </div> <!-- Card END --> </div> {/qb:tag} <ul style="display:none;"> {qb:tag name="member_tpl_001" class="app\qun\model\Member@get_label" union="aid" rows="3"} <li class="avatar avatar-xs"> <img class="avatar-img rounded-circle" src="{:get_user_icon($rs.uid)}" alt="{:get_user_name($rs.uid)}"> </li> {/qb:tag} <li class="avatar avatar-xs"> <div class="avatar-img rounded-circle bg-primary"><span class="smaller text-white position-absolute top-50 start-50 translate-middle">{$rs.usernum}</span></div> </li> </ul> <script type="text/javascript"> $(".qun_member").each(function(){ var that = $(this); //下面要进行内容赋值使用 var id = $(this).data('id'); //对应圈子的ID var page = 1; //只显示第一页的内容 var url = "{qb:url name='member_tpl_001'}" + page + "&aid=" + id; //这里就是异步显示更多的用法,另一个关键地方就是圈子用户关联圈子的字段是aid $.get(url,function(res){ if(res.code==0){ if(res.data!=''){ that.html(res.data); } } }); }); </script> </div> <!--加入圈子--> <script type="text/javascript">var qun_api_url = "/qun/wxapp.member/api.html";</script> <script type="text/javascript" src="__STATIC__/qun/qun.js"></script> <script type="text/javascript"> function morequn(res) { $("#guanzhu").each(function () { var id = $(this).data('id'); var that = this; if ("{$userdb.uid}" == "") { //游客点关注,就直接进入对应的圈子 $(this).click(function () { window.location.href = "{:urls('content/show')}?id=" + id; }); } else { //检查是否已关注 $.get("{:urls('wxapp.member/ckjoin')}?id=" + id, function (res) { if (res.code == 1) { //还没关注 $(that).click(function () { //添加关注点击事件 $.get("{:urls('wxapp.member/join')}?id=" + id, function (res) { if (res.code == 1) { //关注失败 layer.alert(res.msg); } else if (res.code == 0) { //关注成功 layer.msg('已关注,' + res.msg); $(that).html('已关注'); } }); }); } else if (res.code == 0) { //已关注 $(that).html('已关注'); } }); } }); } var qun_page = 1; function show_more_qun() { var url = "{qb:url name='index_qun001' /}"; layer.load(1); qun_page++; $.get(url + qun_page, function (res) { layer.closeAll(); if (res.code == 0) { if (res.data != '') { $(".morequn").append(res.data); } else { layer.msg('没有了!'); $(".show-more-qun-btn").hide(); } } else { } }); } </script>
想要在圈子列表页调用每个圈子的成员头像列表,用标签嵌套标签的形式(JS植入),问题来了,这个关注好像有问题。如果去掉这个头像列表是正常的。