vue.js层叠轮播效果的实例代码

最近写公司项目有涉及到轮播banner，一般的ui框架无法满足产品需求；所以自己写了一个层叠式轮播组件；现在分享给大家；

主要技术栈是vue.js ;javascript;jquery；确定实现思路因工作繁忙，暂时不做梳理了；直接贴代码参考；

此组件是基于jquer封装，在vue项目中使用首先需要先安装jquery插件：指令：npm install jquery,安装完成之后再webpack.base.conf.js配置插件：

 plugins: [
 new webpack.ProvidePlugin({
 $: 'jquery',
 jQuery: 'jquery'
 }),
 ]

主要实现逻辑js文件：postercarousel.js；

代码如下：

(function(jq){
 function postercarousel(o, options, data){
 this.parent = jq("#"+ o);
 this.body = jq("body");
 if (this.parent.length <= 0) { 
 return false;
 }
 
 this.options = jq.extend({}, postercarousel.options, options);
 if(typeof(data) !== 'object') return false;

 this.data = data || {};
 this.reset();
 //处理页面resize
 var _this = this;
 jq(window).resize(function(){
 _this.reset();
 });
 };
 postercarousel.prototype = {
 reset: function(options){
 if(typeof(options) == 'object'){
 jq.extend(this.options, options); 
 }
 if(parseInt(this.body.outerWidth())>1255 || navigator.userAgent.indexOf('iPad') !== -1){
 this.options.width = 970; 
 }else{
 this.options.width = 970; 
 }
 this.total = this.data.length;
 this.pageNow = this.options.initPage;
 this.preLeft = 0;
 this.nextLeft = this.options.width-530;
 this.preNLeft = -530;
 this.nextNLeft = this.options.width;
 this.pageNowLeft = (this.options.width-640)/2
 this.drawContent();
 },
 drawContent: function(){
 this.parent.empty();
 this.parent.css({width:this.options.width+"px", height:this.options.height+"px", position: "relative"});
 this.content = document.createElement("DIV");
 this.content.className = this.options.className;
 this.content.cssText = "width:"+this.options.width+"px;height:"+this.options.height+"px;cursor:move;position:absolute;";
 this.bottomNav = document.createElement("DIV");
 this.bottomNav.className = "bottomNav";
 for(var i=1; i<= this.total; i++){
 var bottomItem = document.createElement("DIV");
 bottomItem.className = "bottomNavButtonOFF";
 if(i == this.pageNow){
 bottomItem.className = "bottomNavButtonOFF bottomNavButtonON";
 }
 bottomItem.setAttribute("ref", i);
 this.bottomNav.appendChild(bottomItem);
 }
 this.content.appendChild(this.bottomNav);
 this.bannerControls = '<div class="bannerControls"> <div class="leftNav" style="display: block;"></div> <div class="rightNav" style="display: block;"></div> </div>';
 this.content.innerHTML += this.bannerControls;

 this.contentHolder = document.createElement("DIV");
 this.contentHolder.style.width = this.options.width + 'px';
 this.contentHolder.style.height = this.options.height + 'px';
 
 for(var item=0, i = 1, l= this.data.length ; item < l ; ++item, ++i){
 var contentHolderUnit = document.createElement("DIV");
 contentHolderUnit.className = "contentHolderUnit";
 contentHolderUnit.setAttribute("ref", i);
 contentHolderUnit.setAttribute("id", 'contentHolderUnit' + (i));
 var unitItem = '<a href="'+this.data[item].url+'" rel="external nofollow" target="_blank" class="elementLink">';
 unitItem += '</a>';
 unitItem += '<img src="'+this.data[item].img+'" alt="'+this.data[item].title+'"/>';
 unitItem += '<span class="elementOverlay"></span>';
 unitItem += '<span class="leftShadow"></span>';
 unitItem += '<span class="rightShadow"></span>';
 contentHolderUnit.innerHTML = unitItem;
 this.contentHolder.appendChild(contentHolderUnit);
 }
 this.content.appendChild(this.contentHolder);
 this.parent.append(this.content);
 this.parent.css({overflow:'hidden'});
 this.initContent();
 this.bind();
 this.start();
 },
 initContent: function(){
 contentHolderUnit = this.parent.find(".contentHolderUnit");
 contentHolderUnit.css({width:'0px',height:'0px', opacity: 0, left:this.options.width/2+'px', zIndex:0, marginTop: '135px'});
 this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+")").css({width:'640px',height:'450', opacity: 1, left: this.pageNowLeft+'px', zIndex: 3, marginTop: 0});
 this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .elementOverlay").css({opacity:0});
 this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .leftShadow").css({opacity:1});
 this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .rightShadow").css({opacity:1});
 
 var pre = this.pageNow > 1 ? this.pageNow -1: this.total;
 var next = this.pageNow == this.total ? 1 : this.pageNow + 1;
 this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 1, left: this.preLeft+'px',height: '450', width: '530px', zIndex: 0, marginTop: '23px'});
 this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
 this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
 this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});

 this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 1, left: this.nextLeft+'px',height: '450', width: '530px', zIndex: 0, marginTop: '23px'});
 this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
 this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
 this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
 },
 bind: function(){
 this.leftNav = this.parent.find(".leftNav");
 this.rightNav = this.parent.find(".rightNav");
 this.bottonNav = this.parent.find(".bottomNavButtonOFF");
 this.lists = this.parent.find(".contentHolderUnit");
 var _this = this;
 this.parent.mouseover(function(){
 _this.stop();
 _this.leftNav.show();
 _this.rightNav.show();
 });
 this.parent.mouseout(function(){
 _this.start();
 //_this.leftNav.hide();
 //_this.rightNav.hide();
 });
 
 _this.leftNav.click(function(){
 _this.turn("right"); 
 });
 _this.rightNav.click(function(){
 _this.turn("left"); 
 });
 _this.bottonNav.click(function(){
 var ref = parseInt(this.getAttribute("ref"));
 if(_this.pageNow == ref) return false;

 if(_this.pageNow < ref){
 var rightAbs = ref - _this.pageNow;
 var leftAbs = _this.pageNow + _this.total - ref;
 }else{
 var rightAbs = _this.total - _this.pageNow + ref;
 var leftAbs = _this.pageNow - ref;
 }
 if(leftAbs < rightAbs){
 dir = "right"; 
 }else{
 dir = "left"; 
 }

 _this.turnpage(ref, dir);
 return false;
 });
 
 _this.lists.click(function(e){
 var ref = parseInt(this.getAttribute("ref"));
 if(_this.pageNow == ref) {
 return true;
 }else{
 e.preventDefault();
 }
 if(_this.pageNow < ref){
 var rightAbs = ref - _this.pageNow;
 var leftAbs = _this.pageNow + _this.total - ref;
 }else{
 var rightAbs = _this.total - _this.pageNow + ref;
 var leftAbs = _this.pageNow - ref;
 }
 if(leftAbs < rightAbs){
 dir = "right"; 
 }else{
 dir = "left"; 
 }
 _this.turnpage(ref, dir); 

 });
 },
 initBottomNav: function(){
 this.parent.find(".bottomNavButtonOFF").removeClass("bottomNavButtonON");
 this.parent.find(".bottomNavButtonOFF:nth-child("+this.pageNow+")").addClass("bottomNavButtonON");
 },
 start: function(){
 var _this = this;
 if(_this.timerId) _this.stop();
 _this.timerId = setInterval(function(){
 if(_this.options.direct == "left"){
 _this.turn("left"); 
 }else{
 _this.turn("right"); 
 }
 }, _this.options.delay);
 },
 stop: function(){
 clearInterval(this.timerId);
 },
 turn: function(dir){
 var _this = this;
 
 if(dir == "right"){
 var page = _this.pageNow -1;
 if(page <= 0) page = _this.total;
 }else{
 var page = _this.pageNow + 1;
 if(page > _this.total) page = 1;
 }
 _this.turnpage(page, dir);
 },
 turnpage: function(page, dir){
 var _this = this;
 if(_this.locked) return false;
 _this.locked = true;
 if(_this.pageNow == page) return false;
 
 var run = function(page, dir, t){
 var pre = page > 1 ? page -1: _this.total;
 var next = page == _this.total ? 1 : page + 1;
 var preP = pre - 1 >= 1 ? pre-1 : _this.total;
 var nextN = next + 1 > _this.total ? 1 : next+1;
 if(pre != _this.pageNow && next != _this.pageNow){
 var nowpre = _this.pageNow > 1 ? _this.pageNow -1: _this.total;
 var nownext = _this.pageNow == _this.total ? 1 : _this.pageNow + 1;
 _this.parent.find(".contentHolderUnit:nth-child("+nowpre+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
 _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
 _this.parent.find(".contentHolderUnit:nth-child("+nownext+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
 }
 if(dir == 'left'){ 
 _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0});
 
 
 _this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
 _this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t);
 _this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
 _this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
 
 
 _this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3});
 _this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '450', width: '640px', zIndex: 3, marginTop: '0'}, t);
 _this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0});
 _this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1});
 _this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1});
 
 _this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 0, left: _this.nextNLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '85px'});
 _this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '450', width:"530px", zIndex: 2, marginTop: '23px'}, t);
 _this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
 _this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
 _this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
 _this.parent.find(".contentHolderUnit:nth-child("+preP+")").css({zIndex:0});
 _this.parent.find(".contentHolderUnit:nth-child("+preP+")").animate({width:'530px',height:'350px', opacity: 0, left:_this.preNLeft+'px', zIndex:0, marginTop: '85px'},t, "", function(){_this.locked=false;});
 
 
 }else{
 _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0});
 
 _this.parent.find(".contentHolderUnit:nth-child("+next+")").css({zIndex:2});
 _this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t);
 _this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
 _this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
 _this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
 
 _this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3}, t);
 _this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '450', width: '640px', zIndex: 3, marginTop: '0px'}, t);
 _this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0});
 _this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1});
 _this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1});
 
 _this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 0, left: _this.preNLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '85px'});
 _this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t);
 _this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
 _this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
 _this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
 
 _this.parent.find(".contentHolderUnit:nth-child("+nextN+")").css({zIndex:0});
 _this.parent.find(".contentHolderUnit:nth-child("+nextN+")").animate({width:'530px',height:'450', opacity: 0, left:_this.nextNLeft+'px', zIndex:0, marginTop: '85px'}, t, "",function(){_this.locked=false;});
 }
 
 _this.pageNow = page;
 _this.initBottomNav();
 };
 
 run(page, dir,_this.options.speed); 
 
 }
 
 };

 postercarousel.options = {
 offsetPages : 3,//默认可视最大条数
 direct : "left",//滚动的方向
 initPage : 1,//默认当前显示第几条
 className : "postercarousel",//最外层样式
 autoWidth : false,//默认不用设置宽
 // width : 100,//最外层宽，需要使用的时候在传,默认由程序自动判断
 height :450,//最外层高 
 delay : 3000,//滚动间隔（毫秒）
 speed : 500 //滚动速度毫秒
 };
 
 window.postercarousel = postercarousel;
})(jQuery)

相关vue组件代码以及使用方式：

代码如下：

<template>
 <div class="broadcast">
 <div class="htmleaf-container">
 <div class="htmleaf-content">
 <div id="postercarousel" style="margin:40px auto 0 auto;"></div>
 </div>
 </div>
 </div>
</template>
<script>
import "jQuery";
import "@/static/js/postercarousel";
export default {
 data() {
 return {};
 },
 mounted() {
 this.initposter();
 console.log(postercarousel);
 21 },
 methods: {
 initposter() {
 var postercarousel = new postercarousel(
 "postercarousel",
 { className: "postercarousel" },
 [
 {
 // img: require("../assets/callme.png"),
 img: 'http://occe.ospc.cn/upload/2016-01-18/145309107223576.jpg',
 // url: "http://www.htmleaf.com/"
 },
 {
 // img: require("../assets/liaojiewaibao.png"),
 img: "http://occe.ospc.cn/upload/2016-01-17/145302166917282.jpg",
 // url: "http://www.htmleaf.com/"
 },
 {
 img: require("../assets/ruhui.png"),
 img: "http://occe.ospc.cn/upload/2016-01-17/14530216405007.png",
 // url: "http://www.htmleaf.com/"
 },
 {
 // img: require("../assets/callme.png"),
 img: "http://occe.ospc.cn/upload/2016-01-18/145309108911041.jpg",
 // url: "http://www.htmleaf.com/"
 },
 ]
 );
 }
 }
};
</script>
<style lang="scss">
.broadcast {
 /* postercarousel */
 #postercarousel {
 width: 100% !important;
 height: 450px;
 }
 .postercarousel {
 position: relative;
 height: 100%;
 width: 100% !important;
 }
 .postercarousel img {
 max-width: 100%;
 max-height: 100%;
 border: 0 none;
 background: #888;
 display: block;
 }
 .postercarousel .contentHolder {
 position: relative;
 overflow: hidden;
 }
 .postercarousel .contentHolderUnit {
 cursor: pointer;
 position: absolute;
 width: 83% !important;
 height: 450px;
 }
 .postercarousel .contentHolderUnit a.elementLink {
 display: block;
 overflow: hidden;
 z-index: 3;
 position: absolute;
 left: 0;
 right: 0;
 width: 100%;
 height: 100%;
 }
 .postercarousel .contentHolderUnit img {
 width: 100%;
 height: 100%;
 display: block;
 }
 .postercarousel .contentHolderUnit .elementTitle {
 }
 .postercarousel .contentHolderUnit .elementOverlay {
 z-index: 1;
 position: absolute;
 top: 0;
 left: 0;
 background: #000;
 width: 100%;
 height: 100%;
 opacity: 0;
 filter: opacity=0;
 }
 .postercarousel .contentHolderUnit .leftShadow {
 position: absolute;
 top: 23px;
 left:-250px;
 // width: 250px;
 height:327px;
 background: url("../assets/images/leftShadow.png") no-repeat;
 background-size: contain;
 }
 .postercarousel .contentHolderUnit .rightShadow {
 position: absolute;
 top: 23px;
 right:134px;
 height: 327px;
 background: url("../assets/images/rightShadow.png") no-repeat;
 background-size: contain;
 }
 .postercarousel .bannerControls {
 }
 .postercarousel .leftNav,
 .postercarousel .rightNav {
 cursor: pointer;
 z-index: 10;
 position: absolute;
 top: 60%;
 width: 45px;
 height: 45px;
 margin-top: -43px;
 }
 .postercarousel .leftNav {
 left: 7px;
 background: url("../assets/images/1.png") no-repeat;
 _background: none;
 _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="@/assets/images/slide_prev_btn.png");
 }
 .postercarousel .rightNav {
 right: 7px;
 background: url("../assets/images/2.png") no-repeat;
 _background: none;
 _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="@/assets/images/slide_next_btn.png");
 }
 .postercarousel .leftNav:hover {
 }
 .postercarousel .rightNav:hover {
 }
 .postercarousel .bottomNav {
 z-index: 140;
 position: absolute;
 width: 100%;
 height: 10px;
 margin-top: 400px;
 padding: 10px 0 0;
 text-align: center;
 }
 .postercarousel .bottomNavButtonOFF {
 cursor: pointer;
 overflow: hidden;
 display: inline-block;
 *display: inline;
 *zoom: 1;
 width: 10px;
 height: 10px;
 margin: 0 5px;
 vertical-align: top;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 background: #c3c3c3;
 }
 .postercarousel .bottomNavButtonOFF:hover {
 background: #aaa;
 }
 .postercarousel .bottomNavButtonON,
 .postercarousel .bottomNavButtonON:hover {
 background: #69aaec;
 }
 .postercarousel .bottomNavLeft {
 }
 .postercarousel .bottomNavRight {
 }
}
</style>

总结

以上所述是小编给大家介绍的vue.js层叠轮播效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

爱go旅游网还为您提供以下相关内容希望对您有帮助：

CSS:称为层叠样式表,是用来表现HTML文件样式的计算机语言,它不仅可以静态修饰网页,也可以配合各种脚本语言来实现动态化效果 JavaScript JavaScript:是一种直译式脚本语言,非常灵活,可以在任何浏览器上开发与调试的一种动态类型、弱类型、基于原型的语言。 常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹...

CSS：称为层叠样式表，是用来表现HTML文件样式的计算机语言，它不仅可以静态修饰网页，也可以配合各种脚本语言来实现动态化效果 JavaScript JavaScript：是一种直译式脚本语言，非常灵活，可以在任何浏览器上开发与调试的一种动态类型、弱类型、基于原型的语言。常见特效、例如：tab、导航、整页滚动、轮播图、...

面向模块编程:AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。第七阶段:主流的流行框架 Web开发工作流:GIT/SVN、Yeoman脚手架、NPMer依赖管理工具、Grunt/Gulp/Webpack。MVC/MVVM/MVW框架:Angular.js、Backbone.js、Knockout/Ember。常用库:React.js、Vue.js、Zepto.js。第八阶段:HTML5原...

3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。

由于不同的浏览器对CSS的解析认识不一样，因此会导致生成的页面效果不一样，这个时候就需要针对不同的浏览器写不同的CSS，这个过程叫CSS hack。虽然我们写代码都要求按照标准，不写hack代码，但实际工作中为了兼容主流浏览器，hack代码是免不了的，所以这也应该是每个前端开发人员 必备的技能。4.业内...

基于webgl的3D框架有thingjs，three.js。thingjs是这两年新兴的3D框架，更加简单，官网有注册优惠别错过~理论知识是基础，对于前端开发者来说，技术应用是进一步的需求，所以thingjs提供免费3D源码和3D模型库，让你在项目开发过程中有东风助力，在实操的过程中你会更好地吸收前端技术知识！前端技术肯定不是...

①计算机基础以及PS基础 ②前端开发基础（HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架）③移动开发 ④前端高级开发（ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等）⑤小程序开发 ⑥全栈开发（MySQL数据库、Python编程语言、Django框架等）...

2、掌握Java Web开发技术：Java开发中使用到的Web前端技术，HTML5+CSS3，JavaScript操作BOM和DOM，JQuery的选择器、事件处理、动画效果，MySQL数据库技术，JDBC技术、JSP、Servlet、EL和JSTL、过滤器和监听器、AJax异步请求等，Linux技术、SVN、Linux环境下项目发布部署等。3、掌握使用流行框架SSM\SSH技术实现...

CommonJS、AMD、CMD、ES6模块化）四、移动端WebApp开发1、应用Vue.js开发WebApp项目 2、应用React.js开发WebApp项目 3、应用Angular开发WebApp项目 五、混合(Hybrid,RN)开发1、微信公众号开发 2、微信小程序开发 3、React Native 六、NodeJS基础、MongoDB、GraphGL、Express、Koa、socket 即时通信……

. 应用Vue.js开发WebApp：Vue.js基础，模块化，单文件组件，路由，与服务器通信，状态管理，单元测试与生产发布，服务端渲染SSR与Nuxt.js，基于Vue.js企业级项目开发等。. 应用React.js开发WebApp：ReactJS基础，JSX语法，组件，flux+Redux，React，Router路由，动画效果，基于React 企业级项目研发等。. ...