艺理堂
异步加载嵌套标签如何处理?
609
0
<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植入),问题来了,这个关注好像有问题。如果去掉这个头像列表是正常的。



5
赏礼
赏钱
收藏
点击回复
      全部留言
  • 0
更多回复
      你可能感兴趣的主题
恢复多功能编辑器
  • 3 1
  • 艺理堂
        圈内贴子87
    • 圈子成员5
    本圈子内的新贴

    推荐内容
    扫一扫访问手机版
    请选择要切换的马甲:

     
    网页即时交流
    QQ咨询
    咨询热线
    020-28998648