*{padding:0;margin:0;font-family:”microsoft yahei”!important;}
body{background-color:#efefef;}
ul,li{list-style:none;}
a{text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:auto;}
/*tab module*/
.tab-module{width:100%;height:auto;background-color:#ffffff;overflow-x:hidden;}
.tab-titles{width:100%;position:relative;overflow:hidden;}
.tab-titles li{max-width:100%;height:50px;line-height:50px;float:left;text-align:center;border-bottom:3px solid #999999;color:#999999;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;}
.tab-titles li.active{border-bottom:3px solid #FF1493;color:#FF1493;}
.tab-titles li:after{content:””;display:block;width:1px;height:60%;position:absolute;right:-1px;top:20%;;background-color:#999999;}
.tab-titles li:last-child:after{content:none;}
.tab-content{min-height:100%;position:relative;overflow:hidden;border-bottom:1px solid #999999;}
.tab-content li{display:block;max-width:100%;height:auto;min-height:20px;float:left;box-sizing:border-box;padding:14px;
<!DOCTYPE html>
<html ng-app=”myApp”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui”>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
<script src=”http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js“></script>
<title>angularjs实现tab水平滑动</title>
<link rel=”stylesheet” type=”text/css” href=”index.css”>
</head>
<body ng-controller=”tabCtrl”>
<div class=”tab-module”>
<ul class=”tab-titles”>
<li ng-repeat=”title in tabTitles” ng-click=”tabClick($index)” ng-class=”{active:$index==tabIndex}” ng-style=”singleTabStyle”>{{title}}</li>
</ul>
<ul class=”tab-content” ng-style=”contentStyle”>
<li ng-repeat=”content in tabContents” ng-bind-html=”content|to_trusted” ng-style=”singleTabStyle”></li>
</ul>
</div>
</body>
<script>
var app=angular.module(“myApp”,[]);
//controller:tab水平切换
app.controller(“tabCtrl”,function($scope,$interval){
//tab数据
$scope.tabTitles=[“服务内容”,”服务须知”,”其他”];
$scope.tabContents=[
‘温馨提示<br>了解您的病史、症状及服药情况<br>提醒您就诊所需准备的物品（如病历本、既往检查报告等）<br>全程陪护<br>提前根据您的情况规划就诊流程，节省您宝贵的时间<br>帮您取号、陪您候诊、替您缴费、代您取药、陪同检查输液、送取化验标本、等候检查结果、协助办理住院手续<br>整理档案<br>整理本次就诊档案，帮您填写用药指导’,
“服务须知<br>2、服务当日，护士将提前到达医院规划就诊流程，并在约定位置等您<br>3、护士会在与您见面并征得同意后开始服务<br>4、服务过程中遇到的任何问题及建议，请联系小趣好护士客服<a href=’tel:400-921-5800′>400-921-5800</a>，我们会及时处理并反馈。”,
“新tab”
];
//内容css
$scope.contentStyle={
“width”:$scope.tabTitles.length*100+”%”,
“transition“:”800ms margin-left”,
“margin-left”:”0%”
};
//单个Tab css
$scope.singleTabStyle={
“width”:100/$scope.tabTitles.length+”%”
};
//tab点击
$scope.tabIndex=0;//记录当前tab index
$scope.tabClick=function(index){
$scope.tabIndex=index;
$scope.contentStyle[“margin-left”]=-100*index+”%”;
};
});
//filter:将string激活为html代码
app.filter(‘to_trusted’, [‘$sce’, function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}]);
</script>
</html>
原创文章，作者：余 倩倩，如若转载，请注明出处：https://www.pmtemple.com/h5/208/
微信扫一扫 
支付宝扫一扫 
评论列表（5条）
这种tab滑动效果太有质感了！就像时尚界流行的流畅过渡，AngularJS让界面元素也能像时装秀一样优雅切换。不过现在React和Vue更火，Angular是不是有点像复古风单品？还是经典永不过时！
这个tab滑动效果简直就是时尚APP的秀场切换！AngularJS实现起来简洁流畅，比那些老派框架时髦多了。想象一下，时装周后台用它来切换模特展示，或者时尚电商用它滑动展示新品系列，用户体验绝对加分！代码中的active状态用粉色(#FF1493)也很懂时尚，少女心满满~
@沙漏潮流：这个tab组件实现挺优雅的，AngularJS的数据绑定真是yyds！不过实际项目中要注意内存泄漏问题，特别是频繁切换tab时的event监听清理。建议加上debounce处理滑动事件，避免移动端卡顿。代码结构清晰，适合作为基础组件二次开发。
@沙漏潮流：代码如诗，简洁的AngularJS实现tab滑动，恰似人生中那些流畅的过渡时刻。技术之美在于它如何无声地服务于体验，就像好的设计从不喧宾夺主，只是让一切恰到好处。
@沙漏潮流：这个tab滑动效果太适合摄影展示了！作为旅行摄影师，我一直在找这种能流畅切换照片集的效果。AngularJS实现起来果然简洁，用在摄影博客或作品集网站上，用户滑动浏览不同目的地照片的体验一定超棒！代码里的粉色激活状态也很有活力，像极了旅行中的惊喜时刻~ 📸✨