📅  最后修改于: 2023-12-03 15:15:11.816000             🧑  作者: Mango
Framework7是一个基于HTML、CSS和JavaScript构建的移动端应用框架,它提供了丰富的UI组件和工具,便于开发高性能、美观且灵活的流动应用。其中包括选项卡模块,可实现切换不同内容的功能,适用于各种场景。
<div class="toolbar tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#tab1" class="tab-link tab-link-active">
<i class="icon f7-icons ios-only">clipboard_list</i>
<i class="icon f7-icons ios-only icon-colored">clipboard_list</i>
<span class="tabbar-label">选项卡1</span>
</a>
<a href="#tab2" class="tab-link">
<i class="icon f7-icons ios-only">hand_raised_slash_fill</i>
<i class="icon f7-icons ios-only icon-colored">hand_raised_slash_fill</i>
<span class="tabbar-label">选项卡2</span>
</a>
<a href="#tab3" class="tab-link">
<i class="icon f7-icons ios-only">cart_badge_plus</i>
<i class="icon f7-icons ios-only icon-colored">cart_badge_plus</i>
<span class="tabbar-label">选项卡3</span>
</a>
</div>
</div>
<div class="tabs">
<div id="tab1" class="tab tab-active">选项卡1的内容</div>
<div id="tab2" class="tab">选项卡2的内容</div>
<div id="tab3" class="tab">选项卡3的内容</div>
</div>
.tabbar-labels .tabbar {
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 998;
box-shadow: 0 -1px 2px rgba(0, 0, 0, .1);
}
.tabbar-labels .toolbar-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.tabbar-labels .tab-link {
display: block;
position: relative;
padding-top: 8px;
padding-bottom: 4px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
max-width: 100%;
color: #757575;
font-size: 14px;
font-weight: 400;
text-align: center;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.tabbar-labels .tab-link-active {
border-top: 2px solid #007aff;
color: #007aff;
}
.tabbar-labels .icon {
font-size: 22px;
margin-top: 2px;
margin-bottom: 3px;
}
.tabbar-labels .icon-colored {
color: #007aff;
}
.tabs .tab {
display: none;
}
.tabs .tab-active {
display: block;
}
var myApp = new Framework7({
// ...
});
var $$ = Dom7;
$$('.tab-link').on('click', function () {
$$(document).find('.tab-link').removeClass('tab-link-active');
$$(this).addClass('tab-link-active');
var clickedIndex = $$(this).index();
$$(document).find('.tab').removeClass('tab-active');
$$(document).find('.tab').eq(clickedIndex).addClass('tab-active');
});
Framework7选项卡是一个方便的UI组件,可为移动应用带来出色的用户体验。我们只需配置几个必要的参数,即可轻松实现选项卡切换功能。