Question

我在Framework7模板中有一个index.html页面，其作用类似于母版页和子页面，例如contact.html;

<div class="pages">
  <div data-page="contact" class="page no-toolbar no-navbar">
    <div class="page-content">

    <div class="navbarpages navbarpagesbg">
                            <div class="navbar_left">
                                <div class="logo_text"><a href="index.html">BLIX</a></div>
                            </div>
                <div class="navbar_right navbar_right_menu">
                <a href="#" data-panel="left" class="open-panel"><img src="images/icons/white/menu.png" alt="" title="" /></a>
                </div>          
                <div class="navbar_right">
                <a href="#" data-panel="right" class="open-panel"><img src="images/icons/white/user.png" alt="" title="" /></a>
                </div>
                <div class="navbar_right">
                <a href="cart.html" data-view=".view-main"><img src="images/icons/white/cart.png" alt="" title="" /><span>3</span></a>
                </div>          
    </div>

     <div id="pages_maincontent">

      <h2 class="page_title">CONTACT</h2>

     <div class="page_single layout_fullwidth_padding">   

            <h2 id="Note"></h2>
            <div class="contactform">
            <form class="" id="ContactForm" method="post" action="">
            <label>Name:</label>
            <input type="text" name="ContactName" id="ContactName" value="" class="form_input required" />
            <label>Email:</label>
            <input type="text" name="ContactEmail" id="ContactEmail" value="" class="form_input required email" />
            <label>Message:</label>
            <textarea name="ContactComment" id="ContactComment" class="form_textarea textarea required" rows="" cols=""></textarea>
            <input type="submit" name="submit" class="form_submit" id="submit" value="Send" />
            <input class="" type="hidden" name="to"  value="youremail@yourwebsite.com" />
            <input class="" type="hidden" name="subject" value="Contacf form message" />
            <label id="loader" style="display:none;"><img src="images/loader.gif" alt="Loading..." id="LoadingGraphic" /></label>
            </form>
            </div>

      <h3>Our Location</h3>

      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193578.74109041138!2d-73.97968099999997!3d40.70331274999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York+NYC%2C+New+York%2C+Statele+Unite+ale+Americii!5e0!3m2!1sro!2s!4v1425027721891" width="100%" height="200" frameborder="0" style="border:0"></iframe> 

      <blockquote>
      Adress: New York 23066 / Pacific Street / Brooklyn <br />
      Email: email@yourwebsite.com <br />
      Mobile: +900 456 567 77
      </blockquote> 

      <a href="tel:+900 456 567 77" class="button_full btyellow external">Call Us Now!</a>   

      <div class="clear"></div>
      </div>

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

当我添加这个javascript的底页时，

<script type="text/javascript">
    alert('Hello World!');
</script>

它不会触发，也不会产生任何错误。当我将它添加到index.html页面或my-app.js文件的底部时，它可以正常工作。但我需要子页面中的一些特定的javascripts。我怎么能得到这个？感谢。

Answer 1

页面活动：https://framework7.io/docs/page.html#page-events

在索引页面上，包含一个whatevername.js文件，并在其中放置页面特定的逻辑。（路由和组件的替代方法）

在该js文件中，通过它的数据名称以及您希望它运行的页面事件来定位页面。

示例：在我的html页面上称为home <div class="page" data-name="home">包含页面内的正常html。

在我的js文件中，我将使用此

在其上运行js

$$(document).on('page:init', '.page[data-name="home"]', function (e) {
    //whatever code here
    alert('Hello World!');
})

所以在主页上，在其init事件中，它将触发具有警报hello world的javascript。

从模板开始，可以更轻松地查看F7中不同部分的工作方式。 https://framework7.io/templates/单一视图是一个很好的起点。

Cordova Framework7模板子页面javascript不起作用

1 个答案: