带用户点赞接入效果

主要用于微社区中的点赞功能

一、接入步骤

1.引用点赞组件JS

<script src="/images/js/bsCommonFiles/js/like-v4.js"></script>

2.引用点赞对应HTML例子，最下方有CSS参考

<div class="detail-like like-wr">
    <div class="users like-users"></div>
     <div class="count"><span class="like-num">-</span>人赞过</div>
     <a href="javascript:" title="赞一个" class="action like-heart"><i class="igfont">&#xe620;</i> 赞一个<span class="action-response">+1</span></a>
</div>

注意：结构可以随意组合，只要保持对应的功能容器正确即可，以下是组件默认的触发元素

like-wr 点赞模块的容器
like-users 点赞用户的头像容器
like-num 点赞数显示的容器
like-heart 点赞触发按钮
like-heart-add 点赞按钮的已点赞状态
like-heart-success 点赞按钮的点赞成功状态（用来做+1特效）

3.初始化点赞组件

//完整版点赞初始化（自定义一些触发&状态）
var liker =new LikeV4({
  //wr:".like-wr", //点赞模块容器，默认.like-wr
  //heart:".like-heart",  //触发点赞按钮，默认.like-heart
  //num:".like-num", //点赞数显示的容器，默认.like-num
  //users:".like-users", //显示用户头像的容器，默认.like-users
  //addHeart:"like-heart-add", //已点赞按钮状态
  //addHeartSuccess:"like-heart-success", //点赞成功按钮状态，一般用来做+1特效
  game:"cfm",  //业务gid
  bid:"match",  //业务bid，统一rtx向xiaodong索要
  infoId:"newid", //资讯的唯一ID
  needAvatars:true,  //是否需要显示头像，默认false
  sandbox:1,  //测试环境1，正式环境为0，默认0
  debug:true,  //调试过程是否输出调试内容，默认false
  //初始化成功回调
  onInitSuccess:function(e){
        console.log(e);
  },
  //没有登录态的情况
  onNoDataSearch:function(){
      //直接隐藏整个点赞区域
      $(".like-wr").css("display","none")
  }
});

二、CSS参考

.detail-like{text-align:right}
.detail-like .count,.detail-like .users{display:inline-block;vertical-align:middle}
.detail-like .avatar{width:.4rem;height:.4rem;overflow:hidden;border-radius:.4rem;float:left;margin-left:-.1rem;border:1px solid #000}
.detail-like .avatar img{width:100%;display:block;height:100%}
.detail-like .count{font-size:.24rem;color:#757373;margin-left:.1rem}
.detail-like .action{display:inline-block;width:1.5rem;height:.43rem;line-height:.43rem;text-align:center;color:#fff;background:#f0a513;margin-left:.4rem;border-radius:2px;position:relative}
.detail-like .action .igfont{margin-right:.03rem}
.detail-like .like-heart-add{background:#363639;color:#5f5f5f}
.detail-like .action:active{-webkit-transform:translateY(.02rem)}
.detail-like .action-response{color:#fff;font-size:.24rem;opacity:0;position:absolute;right:-.5rem}
.detail-like .like-heart-success .action-response{-webkit-animation:addone 1s forwards 1}
.hairlines .detail-like .avatar{border-width:.5px}
@keyframes addone{0%{opacity:1;-webkit-transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(-.2rem)}
}

三、调试

请使用抓包工具，抓取游戏的登录态，追加在页面URL中，进行测试。