我们先来看下设计和[需求]
页面设计非常简单，构思一下页面架构和布局，就可以开始干了，对于css和html很熟练的同学来说应该是一个很简单的项目。
新建一个项目名为主播排行榜，添加基本的项目目录结构，新建一个index页面，注意是移动端页面必要的meta标签不要忘记了，这个html页面应该是这样子的。
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="format-detection" content="telephone=no, address=no"> <meta name="author" content="Storm"> <title>人气/魅力排行榜</title> </head> <body> </body> </html> 眼尖的同学应该看到了 author是Storm，哈哈，其实这是老大写的html文档，我只是接手写js而已。算了，html不难，我们快进到js部分。
效果中有一个左右切换的交互，我们利用现成的插件swiper做，官网地址http://www.swiper.com.cn/，所以我们需要的js资源应该有两个
<script src="https://cdn.bootcss.com/angular.js/1.5.7/angular.min.js" rel="external nofollow" ></script><script src="https://cdn.bootcss.com/Swiper/3.3.1/js/swiper.min.js" rel="external nofollow" ></script> 有了angular和swiper，现在就需要我们自己动手了，左右切换js代码
//滑动切换 var swiper = new Swiper('#swiper-container', { resistanceRatio: 0, pagination: '.swiper-pagination', parallax: true, paginationClickable: true, resistance: '100%', speed: 300, paginationBulletRender: function(index, className) { var name; switch (index) { case 0: name = '主播人气榜'; className += ' ranking-btn'; break; case 1: name = '主播魅力榜'; className += ' charm-btn'; break; default: name = ''; } return '<div class="' + className + '">' + name + '</div>'; } }); 首先需要声明是一个ng程序， 然后声明controler，获取后端的列表数据，两个排行榜数据，angular有现成的http服务，为了方便那我们好用，我们将http封装成ajax方法。
var app = angular.module('leaderboard', []);app.controller('leaderboard', function($scope, $http) { //封装ajax请求 var ajax = function(action, data, callback) { $http[method](action, data) .success(function(req) { if (req.code === '000000') { callback(req.data); } else { $scope.failureHide = false; $scope.infoHide = true; //退出弹出框 $scope.failureMsg = req.msg; } }) .error(function() { $scope.failureHide = false; $scope.infoHide = true; //退出弹出框 $scope.failureMsg = '网络错误请重试'; }); }; // 直播人气榜 ajax(masterPopularRank, {}, function(data) { $scope.loading = false; $scope.masterPopularRank = data.masterPopularRank; //人气主播列表 }); // 直播魅力榜 ajax(masterCharmRank, {}, function(data) { $scope.loading = false; $scope.masterCharmRank = data.masterCharmRank; //魅力主播列表 });}) 忘记说了，我们将获取的接口数据data挂载到$scope.masterPopularRank和$scope.masterCharmRank中，页面中需要用指令获取并渲染出数据，所以我们需要在html中加一点点指令渲染人气榜中的金牌。
因为我们的masterPopularRank是一个Array，所以很自然的我们取第一名就是masterPopularRank[0]，对应的字段用.去获取，masterPopularRank[0].nickname得到的就是[人气榜]的[第一名]的[昵称]，其他的字段类似。
这里有个小技巧，就是渲染下面的列表4-10名的数据。自然我们想到的是ng-repeat，然后我们用了一个ng-if="$index > 2"的指令，这样我们就将1-3名的省略掉了,很投巧的方法，本来我以为angular中也有和vue一样的limit过滤，可惜我没有找到。
<!-- 金牌 --><div class="gold medal"> <div class="medal-img" ng-click="getUserInfo(masterPopularRank[0])"><img ng-src="{{masterPopularRank[0].icon}}" rel="external nofollow" alt="{{masterPopularRank[0].nickname}}" /><span class="gold-crown"></span></div> <p class="medal-title">{{masterPopularRank[0].nickname}} <button ng-if="masterPopularRank[0].subStatus == 1" disabled type="button" class="btn-attention">已关注</button> <button ng-if="masterPopularRank[0].subStatus == 0" type="button" class="btn-attention" ng-click="getFocus(masterPopularRank[0])">关注</button> </p> <p class="medal-code">喵号 {{masterPopularRank[0].platAcc}}</p></div><!-- /金牌 --><!-- 人气榜列表 --><ul class="list"> <li ng-repeat="master in masterPopularRank" ng-if="$index > 2" class="list-item"> <div class="list-num">{{$index+1}}</div> <div class="list-img" ng-click="getUserInfo(master)"><img ng-src="{{master.icon}}" rel="external nofollow" src="" rel="external nofollow" alt="{{master.nickname}}" /></div> <div class="list-info"> <div class="list-name">{{master.nickname}} <button ng-if="master.subStatus == 1" disabled type="button" class="btn-attention">已关注</button> <button ng-if="master.subStatus == 0" type="button" class="btn-attention" ng-click="getFocus(master)">关注</button> </div> <div class="list-code">喵号 {{master.platAcc}}</div> </div> </li></ul><!-- /人气榜列表--> 这样渲染的出来的列表我们就可以看到效果了，当然数据是我们本地模拟的数据，切换也有了的，但是还缺一点就是点击个人头像会弹出个人信息，这个需要我们做一个弹出框，利用ng-if显示隐藏就好了。
具体的实现方式是在html中注册一个点击事件，点击的时候更改$scope.infoHide = fasle;这样就是显示弹出框，当然在这之前需要把个人信息的数据填入，然后我们点击弹框的关闭按钮$scope.infoHide = true。
好了，代码实现的思路都说明了，具体代码在git上有，地址为http://git.oschina.net/zss01/Ranking，项目应该是最近两天上线，也可以进游戏猫app的直播模块的banner。
ps彩蛋:
1.由于产品需求会有所变更，比如弹出框中的关注按钮去掉了。
2.由于需求优化中有一在弹出框弹出的时候不允许页面滑动，告诉大家一个比较好的方案。
$scope.unmove = function(event) { event.preventDefault();}//组织页面滑动document.addEventListener("touchmove", $scope.unmove, false);//允许页面滑动document.removeEventListener("touchmove", $scope.unmove, false);