如何在Framework7中使用缓存页面时添加侧面板？

我正在使用缓存页面，我将所有页面写入单个文件index.html。如何在Framework7中使用缓存页面时添加侧面板？

如何将侧面板添加到特定页面？

的index.html

<body> 
<div class="statusbar-overlay"></div> 
<div class="views"> 
    <div class="view view-main"> 
    <!-- Navbar --> 
    <div class="navbar no-border"> 
     <div class="navbar-inner"> 
     <div class="left"></div> 
     <div class="center sliding">Welcome to Page</div> 
     <div class="right"></div> 
     </div> 
     <div class="navbar-inner cached" data-page="detailsPage"> 
     <div class="left sliding"> 
      <a href="index" class="link back"> 
      <i class="icon icon-back"></i><span>Back</span> 
      </a> 
     </div> 
     <div class="center sliding">Detail page</div> 
     <div class="right"></div> 
     </div> 
     <div class="navbar-inner cached" data-page="loginPage"> 
     <div class="left sliding"> 
      <a href="index" class="link back"> 
      <i class="icon icon-back"></i><span>Back</span> 
      </a> 
     </div> 
     <div class="center sliding">Login</div> 
     <div class="right"></div> 
     </div> 
     <div class="navbar-inner cached" data-page="registerPage"> 
     <div class="left sliding"> 
      <a href="index" class="link back"> 
      <i class="icon icon-back"></i><span>Back</span> 
      </a> 
     </div> 
     <div class="center sliding">Register</div> 
     <div class="right"></div> 
     </div> 

     <div class="navbar-inner cached" data-page="welcome"> 
     <div class="left sliding"> 
      <!-- <a href="index" class="link back"> 
      <i class="icon icon-back"></i><span>Back</span> 
      </a> --> 
     </div> 
     <div class="center sliding">Realmilk</div> 
     <div class="right"></div> 
     </div> 
    </div> 

    <!-- Pages --> 
    <div class="pages navbar-through toolbar-through"> 

     <!-- Page 1 --> 
     <div data-page="index" class="page" ng-controller="IndexPageController"> 
     <!-- Page content--> 
     <div class="page-content"> 
      <a href="#loginPage" class="button button-big button-round">Realmilk Login</a> 
      <a href="#registerPage" class="button button-big button-round">Register Here</a> 
     </div> 
     </div> 
     <!-- Page 2 --> 
     <div data-page="detailsPage" class="page cached" ng-controller="DetailPageController"> 
     <!-- Page content--> 
     <div class="page-content"> 
      This is page 2 
     </div> 
     </div> 

     <!-- Welcome Page--> 
     <div data-page="welcome" class="page cached" ng-controller="WelcomePageController"> 
     <!-- Page content--> 
     <div class="page-content"> 
      <div class="card"> 
       <div class="card-content"> 
       <div class="card-content-inner">Welcome to the Realmilk :: {{user_info.firstName}}</div> 
       </div> 
      </div> 
      <style> 
      .demo-card-header-pic .card-header { 
       height: 40vw; 
       background-size: cover; 
       background-position: center; 
      } 
      </style> 

      <div class="card demo-card-header-pic"> 
      <div style="background-image:url(http://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif)" valign="bottom" class="card-header color-white no-border">Journey To Mountains</div> 
      <div class="card-content"> 
       <div class="card-content-inner"> 
       <p class="color-gray">Enrolled on January 21, 2015</p> 
       <p>Molabanti Dairy farm is RealMilk certified cattle farm.</p> 
       </div> 
      </div> 
      <div class="card-footer"> 
       <a href="#" class="link">Like</a> 
       <a href="#" class="link">Read more</a> 
      </div> 
      </div> 

     </div> 
     </div> 
     <!-- Login Page --> 
     <div data-page="loginPage" class="page cached" ng-controller="LoginPageController"> 
     <!-- Page content--> 
     <div class="page-content"> 
      <form id="login-form" class="list-block"> 
      <div class="item-content"> 
       <div class="item-inner"> 
       <div class="item-title label">Email</div> 
       <div class="item-input"> 
        <input type="email" name="emailId" id="emailId" placeholder="Enter Email" ng-model="user.emailId"> 
       </div> 
       </div> 
      </div> 
      <div class="item-content"> 
       <div class="item-inner"> 
       <div class="item-title label">Password</div> 
       <div class="item-input"> 
        <input type="password" name="password" id="password" placeholder="Enter Password" ng-model="user.password"> 
       </div> 
       </div> 
      </div> 
      </form> 

      <div class="content-block"> 
      <p><a href="#" class="button button-round active" ng-click="signIn(user)">Sign In</a></p> 
      </div> 
     </div> 
     </div> 

     <!-- Registration Page --> 
     <div data-page="registerPage" class="page cached" ng-controller="RegisterPageController"> 
     <!-- Page content--> 
     <div class="page-content"> 
      <form id="registration-form" class="list-block"> 
      <ul> 
       <li> 
       <div class="item-content"> 
        <div class="item-media"><i class="icon f7-icons">persons</i></div> 
        <div class="item-inner"> 
        <!-- <div class="item-title label">Gender</div> --> 
        <div class="item-input"> 
         <select id="boom" name="type" ng-model="user.type"> 
         <option value="Retailer">Consumer</option> 
         <option value="Dairyfarm">Farmer</option> 
         </select> 
        </div> 
        </div> 
       </div> 
       </li> 
       <!-- Text inputs --> 
       <li> 
       <div class="item-content"> 
        <div class="item-media"><i class="icon f7-icons">person</i></div> 
        <div class="item-inner"> 
        <!-- <div class="item-title label">First Name</div> --> 
        <div class="item-input"> 
         <input type="text" name="first_name" placeholder="First name" ng-model="user.first_name"> 
        </div> 
        </div> 
       </div> 
       </li> 
       <!-- Text inputs --> 
       <li> 
       <div class="item-content"> 
        <div class="item-media"><i class="icon f7-icons">person</i></div> 
        <div class="item-inner"> 
        <!-- <div class="item-title label">Last Name</div> --> 
        <div class="item-input"> 
         <input type="text" placeholder="Last name"> 
        </div> 
        </div> 
       </div> 
       </li> 
       <li> 
       <div class="item-content"> 
        <div class="item-media"><i class="icon f7-icons">phone</i></div> 
        <div class="item-inner"> 
        <!-- <div class="item-title label">Phone</div> --> 
        <div class="item-input"> 
         <input type="tel" id="phone" name="primary_mobile_number" placeholder="Phone" ng-model="user.primary_mobile_number"/> 
        </div> 
        </div> 
       </div> 
       </li> 
       <li> 
       <div class="item-content"> 
        <div class="item-media"><i class="icon f7-icons">email</i></div> 
        <div class="item-inner"> 
        <!-- <div class="item-title label">Email</div> --> 
        <div class="item-input"> 
         <input type="email" name="email_id" id="email_id" placeholder="Enter Email" ng-model="user.email_id"> 
        </div> 
        </div> 
       </div> 
       </li> 
       <li> 
       <div class="item-content"> 
        <div class="item-media"><i class="icon f7-icons">lock</i></div> 
        <div class="item-inner"> 
        <!-- <div class="item-title label">Password</div> --> 
        <div class="item-input"> 
         <input type="password" id="password" name="password" placeholder="Password" ng-model="user.password"/> 
        </div> 
        </div> 
       </div> 
       </li> 
       <li> 
       <div class="item-content"> 
        <div class="item-media"><i class="icon f7-icons">lock</i></div> 
        <div class="item-inner"> 
        <!-- <div class="item-title label">Password</div> --> 
        <div class="item-input"> 
         <input type="password" id="confirmpassword" name="confirmpassword" placeholder="Confirm Password" ng-model="user.confirmpassword"/> 
        </div> 
        </div> 
       </div> 
       </li> 
      </ul> 
      </form> 
      <div class="content-block"> 
      <p><a href="#" class="button button-round active" ng-click="registerUser(user)">Register</a></p> 
      </div> 
     </div> 
     </div> 

    </div> 
    </div> 
</div>

来源

2017-02-09 Jaccs

据我从documentation看到。

添加此html语法后：
<div class="statusbar-overlay"></div>
或之前：
<div class="views">...</div>。

代码语法：

<div class="panel-overlay"></div> 
<div class="panel panel-left panel-reveal"> 
    <div class="content-block"> 
    <p>Left Panel content here</p> 
    <p><a href="#" class="close-panel">Close me</a></p> 
    <p><a href="#" data-panel="right" class="open-panel">Open Right Panel</a></p> 
    </div> 
</div>

好了，现在当你在你的应用程序有面板，你需要知道如何打开/关闭它们：

要打开面板，我们需要将“开放面板”类添加到任何HTML元素（首选链接）
要关闭面板，我们需要将“关闭面板”类添加到任何HTML元素（首选为l墨水）
如果您在应用程序中有两个面板，则此链接将默认打开/关闭左面板
如果要指定应打开/关闭哪个面板，则可以通过其他data-panel =“这个HTML元素左侧的”属性

打开面板采用刷卡

若要使此功能工作，你需要通过传递相关参数，使之在App初始化：

var myApp = new Framework7({ 
    swipePanel: 'left' 
});

来源

2017-02-09 09:41:49

现在，我需要的是如何在特定页面状态栏上添加侧面板图标？ – Jaccs

如何在Framework7中使用缓存页面时添加侧面板？

回答

相关问题