我对可转换标签有一些问题。我的问题是当Tab-1设置为活动时Tab-2显示为激活，并且在滑动和单击选项卡时也存在一些奇怪的行为。
我无法理解为什么会这样！任何人有任何想法，请随时帮助我。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#2196f3">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
<title>Framework7</title>
<link rel="stylesheet" href="css/framework7.min.css">
<link rel="stylesheet" href="css/app.css">
<link rel="apple-touch-icon" href="img/f7-icon-square.png">
<link rel="icon" href="img/f7-icon.png">
</head>
<body>
<div id="app">
<div class="view view-main view-init">
<div class="page hide-navbar-on-scroll">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons ios-only">menu</i>
<i class="icon material-icons md-only">menu</i>
</a>
</div>
<div class="title sliding">Framework7</div>
<div class="right">
<a class="link icon-only searchbar-enable" data-searchbar=".searchbar-components">
<i class="icon f7-icons ios-only">search_strong</i>
<i class="icon material-icons md-only">search</i>
</a>
</div>
<form data-search-container=".components-list" data-search-in="a" class="searchbar searchbar-expandable searchbar-components searchbar-init">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search components"/>
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button">Cancel</span>
</div>
</form>
</div>
</div>
<div class="toolbar tabbar tabbar-labels toolbar-bottom-md">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">
<!-- Different icons for iOS and MD themes -->
<i class="icon f7-icons ios-only">email_fill</i>
<i class="icon material-icons md-only">email</i>
<!-- Label text -->
<span class="tabbar-label">Inbox</span>
</a>
<a href="#tab-2" class="tab-link">
<i class="icon f7-icons ios-only">today_fill<span class="badge color-red">5</span></i>
<i class="icon material-icons md-only">today<span class="badge color-red">5</span></i>
<span class="tabbar-label">Calendar</span>
</a>
<a href="#tab-3" class="tab-link">
<i class="icon f7-icons ios-only">cloud_fill</i>
<i class="icon material-icons md-only">file_upload</i>
<span class="tabbar-label">Upload</span>
</a>
</div>
</div>
<div class="tabs-swipeable-wrap">
<div class="tabs">
<div id="tab-1" class="page-content tab tab-active">
<div class="block">
<p>Tab 1 content</p>
...
</div>
</div>
<div id="tab-2" class="page-content tab">
<div class="block">
<p>Tab 2 content</p>
...
</div>
</div>
<div id="tab-3" class="page-content tab">
<div class="block">
<p>Tab 3 content</p>
...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/framework7.js"></script>
<script src="js/routes.js"></script>
<script src="js/app.js"></script>
</body>
答案 0 :(得分：1)
搜索栏导致可滑动选项卡发生故障。
解决方案是禁用搜索栏背景。
app.searchbar.create({
el: '.searchbar',
backdrop: false
});