用异步加载,可加快网页打开速度

下面这段代码标签中加了参数 js=“qun_wapindex001” 这个参数中的值必须是标签外面的class存在的元素<ul class="qun_wapindex001">, 这样页面就可以异步加载进来的数据,赋值到外面那个对应的class元素那里. 这个JS值可以跟标签名不一样. 但是必须要保证 标签外面也有对应的 class值才行.

下面这段JS 脚本, 他的取名也很关键, 他是跟标签名一致的. 也就是说页面加载完之后,他就会执行对应的 以标签名一样的JS脚本 传值就通过 data-id="{$rs.id}" 进行传递

  <div class="HotGroupBox">
    <div class="head">热门圈子</div>
    <div id="ListGroup">
      <ul class="qun_wapindex001">
        {qb:tag name="qun_wapindex001" type="qun" order="list" by="desc" rows="10" js="qun_wapindex001"}
        <li><a href="{$rs.url}"><span><img src="{$rs.picurl}" onerror="this.src='__STATIC__/images/nopic.png'"></span><em>{$rs.title}</em></a>
        <dd data-id="{$rs.id}">关注</dd>
        </li>
        {/qb:tag}
      </ul>
    </div>
  </div>
<script type="text/javascript">
//关注圈子 , 此异步函数名必须要跟上面的JS值一致
function qun_wapindex001(res){
  $("#ListGroup dd").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('已关注');
        }
      });

    }
  });
}
</script>