Agile Lite默认控制器CSS扩展实现H5组件动画切换-优快云博客

本文介绍如何使用AgileLite的默认控制器和组件UI渲染来满足多样化的开发需求，包括通过CSS扩展控制器功能，实现类似大众点评筛选菜单的效果。

2019独角兽企业重金招聘Python工程师标准>>>

Agile Lite中提供了很多控制器和组件的交互，但是实际开发过程中还会遇到很多种场景无法满足。这里介绍一下如何使用Agile Lite的默认控制器和组件的UI渲染来满足不同的场景需要

默认控制器的扩展

默认控制器的扩展是指通过CSS样式对控制器进行UI渲染，使得默认控制器的使用场景更丰富。

扩展默认控制器的方法

Agile Lite的控制器和组件工作基本原理可以知道：当前被触发的控制器会具有active样式，而同组的其他控制器不具有active样式；处于激活状态的组件具有active样式，同组的其他组件不具有active样式。

所以，对默认控制的扩展，可以根据控制器和组件是否具有active样式实现。

实际案例操作

场景：

我们需要实现类似于大众点评筛选菜单的功能，效果如下：

（可访问此链接查看）

从效果图看，页面顶部第二排的过滤器按钮其实就是控制器，他们的特点就是当点击某个控制器的时候箭头的方向会改变，所以我们可以给具有active样式的控制器设置箭头向上的样式，不具有active样式的控制器设置箭头向下的样式。

控制器HTML代码片段如下：

<ul class="my_filter_controller">
    <li data-role="tab" data-toggle="view" href="#fujin"><span>附近</span><i>|</i></li>
    <li data-role="tab" data-toggle="view" href="#meishi"><span>美食</span><i>|</i></li>
    <li data-role="tab" data-toggle="view" href="#paixu"><span>智能排序</span><i>|</i></li>
    <li data-role="tab" data-toggle="view" href="#shaixuan"><span>筛选</span></li>
</ul>

此控制器的样式如下：

.my_filter_controller { z-index:2;position:absolute;top:44px; height:44px;width:100%; clear:both; border-bottom:1px solid #e7e7e7; background:#fff;}
.my_filter_controller li { float:left; width:25%; line-height:44px; text-align:center; font-size:12px; }
.my_filter_controller li span:after { color:#95a5a6;font-family: Ratchicons;}
.my_filter_controller li span:after{ content: '\e814'; }
.my_filter_controller li.active span:after{ content: '\e81f'; -webkit-animation: spinner 0.1s 2 linear;animation: spinner 0.1s 2 linear;}
.my_filter_controller li i { float:right; color:#ECF0F1;}

这里尤其关注.my_filter_controller li span:after和.my_filter_controller li.active span:after

.my_filter_controller下的li为控制器，所以li在处于激活和为激活状态时分别具有active样式和非active样式，只需要根据这个特点设置不同的字体图就可以实现点击箭头切换的效果

同样的，点击过滤按钮控制器会向下弹出对应的组件，而向下弹出的动画效果可以加到具有active的组件中，而不具有active样式的组件设置隐藏即可。

组件HTML代码片段如下：

<div id="meishi" class="my_filter_component" data-role="view">
    <div class="my_filter_component_content">
        <div style="text-align:center;padding:20px 0px;">在这里自定义你的内容吧</div>
    </div>
</div>

其样式为：

.my_filter_component.active { z-index:1; position:absolute; display:block; width:100%; height:100%; background:rgba(0,0,0,0.2);}
		
.my_filter_component.active .my_filter_component_content { -webkit-animation: slideDownIn 1s; height:80%; background:#fff;}

只需要给组件的active下的子元素添加动画即可

是不是很简单呢