在Framework7中如何将HTML页面与JavaScript文件关联

一、完善HTML页面结构 #

你提供的代码仅包含page-content部分，需要将其包裹在Framework7标准的page元素中，并确保page元素带有data-name="utilityForm"属性（与JavaScript中的监听选择器匹配），同时要正确引入Framework7资源和自定义JS文件。

完整HTML示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 引入Framework7 CSS -->
  <link rel="stylesheet" href="path/to/framework7.bundle.min.css">
</head>
<body>
  <!-- Framework7 App根元素 -->
  <div id="app">
    <!-- 页面容器 -->
    <div class="page" data-name="utilityForm">
      <!-- 你的表单内容 -->
      <div class="page-content" id="details-form">
        <div class="block-title">缴费信息</div>
        <div class="list no-hairlines-md">
          <ul>
            <li>
              <div class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">电表号</div>
                  <div class="item-input-wrap">
                    <input type="number" name="meterNumber" placeholder="请输入电表号" required="required" />
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">金额</div>
                  <div class="item-input-wrap">
                    <input type="number" name="amount" placeholder="请输入金额" required="required" />
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <p class="row">
          <a href="#" class="col button button-fill" id="paymentbtn">购买</a>
        </p>
      </div>
    </div>
  </div>

  <!-- 引入Framework7 JS -->
  <script src="path/to/framework7.bundle.min.js"></script>
  <!-- 引入自定义JavaScript文件 -->
  <script src="path/to/your-custom-script.js"></script>
</body>
</html>

二、确保JavaScript文件正确绑定事件 #

你的JavaScript代码逻辑是正确的，补充细节后可直接使用：

$$(document).on('page:init', '.page[data-name="utilityForm"]', function (e) {
  $$('#paymentbtn').on('click', function (e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    console.log("购买按钮已点击");
    // 可在此添加表单数据收集、提交逻辑
    const meterNumber = $$('input[name="meterNumber"]').val();
    const amount = $$('input[name="amount"]').val();
    console.log("电表号：", meterNumber, "金额：", amount);
  });
});

三、关键注意事项 #

• 表单必须放在带有data-name属性的page元素内，Framework7的page:init事件才会触发
• 资源引入顺序不能错：先加载Framework7 CSS，再加载Framework7 JS，最后加载自定义JS
• 点击a标签时需添加e.preventDefault()，避免页面默认跳转刷新

内容的提问来源于stack exchange，提问作者Mr Chefane