Framework 7的Photo Browser组件无法正常运行问题求助

问题原因&解决方法 #

• 脚本加载顺序错误：你的初始化代码写在了Framework7核心库引入之前，执行代码时Framework7、Dom7等对象还未定义，直接触发JS报错导致功能失效。
• 重复引入Framework7核心库：你同时引入了framework7-bundle.min.js和framework7.js两个核心库文件，重复引入会产生对象覆盖、方法冲突等问题，只需保留framework7-bundle.min.js即可，该版本已经内置了所有组件包括Photo Browser。

修正后的完整代码 #

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
      <meta name="theme-color" content="#fff">
      <meta name="format-detection" content="telephone=no">
      <meta name="msapplication-tap-highlight" content="no">
      <title>My App</title>
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
      <link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png">
      <link rel="icon" href="assets/icons/favicon.png">
      <link rel="manifest" href="/manifest.json">
      <link rel="stylesheet" href="framework7/framework7-bundle.min.css">
      <link rel="stylesheet" href="css/icons.css">
      <link rel="stylesheet" href="css/app.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <style type="text/css">
         :root {
         --f7-photobrowser-bg-color: #fff;
         --f7-photobrowser-bars-bg-image: none;
         --f7-photobrowser-caption-font-size: 14px;
         --f7-photobrowser-caption-light-text-color: #000;
         --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);
         --f7-photobrowser-caption-dark-text-color: #fff;
         --f7-photobrowser-caption-dark-bg-color: rgba(0, 0, 0, 0.8);
         --f7-photobrowser-exposed-bg-color: #000;
         --f7-photobrowser-dark-bg-color: #000;
         --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
         --f7-photobrowser-dark-bars-text-color: #fff;
         --f7-photobrowser-dark-bars-link-color: #fff;
         }
      </style>
   </head>
   <body>
      <div id="app">
         <!-- Your main view, should have "view-main" class -->
         <div class="view view-main view-init safe-areas">
            <div class="page" data-name="home">
               <div class="page-content">
                  <div class="block row">
                     <div class="col-33"><a href="#" class="button button-fill pb-standalone">Standalone</a></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- Framework7 library 只保留bundle版 -->
      <script src="framework7/framework7-bundle.min.js"></script>
      <!-- App routes -->
      <script src="js/routes.js"></script>
      <!-- App store -->
      <script src="js/store.js"></script>
      <!-- App scripts -->
      <script src="js/app.js"></script>
      <!-- 初始化代码移到核心库加载之后 -->
      <script type="text/javascript">
         var app = new Framework7({
           el: '#app' // 加上根元素配置更规范
         });
         var $$ = Dom7;
         
         
         /*=== Default standalone ===*/
         var myPhotoBrowserStandalone = app.photoBrowser.create({
         photos : [
             'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
             'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
             'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
         ]
         });
         //Open photo browser on click
         $$('.pb-standalone').on('click', function () {
         myPhotoBrowserStandalone.open();
         });
      </script>
   </body>
</html>

修改后点击按钮即可正常弹出Photo Browser组件。

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