Question

我打算创建以下设计：

enter image description here

主视图应显示网页
左侧应该有一个抽屉
抽屉应由应用标题

我现在有以下app结构：

主要观点：

<div class="padding" ng-controller="IndexController">
    <super-navbar>
        <super-navbar-title>
            My first app!
        </super-navbar-title>
    </super-navbar>    
</div>

控制器：

angular
  .module('example')
  .controller('IndexController', function($scope, $document, supersonic) {
      $scope.navbarTitle = "Index";         
      addEventListener('load', load, false);
      steroids.view.displayLoading();
      var googleLayer = null;
      googleLayer = new steroids.views.WebView({ location: "http://example.com/page1" });;
      googleLayer.preload({}, {
          onSuccess: replaceLayer
      });

      function load() {        

          var options = {
              side: "left",
              width: 150
          }
          supersonic.ui.views.find("leftDrawer").then(function (leftDrawer) {
              supersonic.ui.drawers.init(leftDrawer);
              supersonic.ui.drawers.open("leftDrawer")
          });

      }
      function replaceLayer() {          
          steroids.layers.replace({
              view: googleLayer,
          }, {
              onSuccess: function () {
                  //alert("The layer stack has been replaced.");
              },
              onFailure: function (error) {
                  //alert("Could not replace the layer stack: " + error.errorDescription);
              }
          });
      }      
  });

Structure.coffee：

# Read more about app structure at http://docs.appgyver.com

module.exports =

  # See styling options for tabs and other native components in app/common/native-styles/ios.css or app/common/native-styles/android.css
#tabs
    rootView:
     location: "example#getting-started"

  preloads: [
    {
      id: "learn-more"
      location: "example#learn-more"
    }
    {
      id: "using-the-scanner"
      location: "example#using-the-scanner"
    }
  ]

  drawers:
    left:
      id: "leftDrawer"
      location: "example#drawer"
      showOnAppLoad: true
     options:
      animation: "swingingDoor"

 # initialView:
  #   id: "initialView"
   #  location: "example#initial-view"

到目前为止的行为：

应用程序启动并显示加载圈（因为steroids.view.displayLoading();）
加载圈消失，网页加载（因为googleLayer正在替换初始视图）
未显示抽屉

我认为，应该做出这些修改：

初始视图应该已经加载了页面（如何？它只是一个div）
抽屉应该正常工作
应该有一个可点击的'汉堡包'图标

我应该修改什么来实现所需的行为？我找不到任何适当的教程或足够的文档。

Answer 1

您的初始视图已被评论。删除“＃”

Answer 2

关于您想要午餐的第一个视图：

您可以使用Tabs或InitialView以及标签的工作方式，使用第一个标签内容作为预先选择并显示它。因此，如果您对其进行评论或将其打开，则InitialView不会有任何意义。

在Structure.coffee

tabs: [
    {
      title: "Index"
      id: "index"
      location: "home#index" # Supersonic module#view type navigation
    }
    {
      title: "About"
      id: "geolocation"
      location: "home#drawer"
    }
    {
      title: "Internet"
      id: "internet"
      location: "http://google.com" # URLs are supported!
    }
  ]

在您的情况下，仅使用InitialView，注释上面的行并取消注释向下，这：

  rootView:
    location: "example#getting-started"

关于抽屉，首先，请确保您对此数组有意，以使其成为module.exports =的一部分

对于可点击的汉堡包，您现在无法将其显示为导航栏中的图标（我猜这种限制因为超音速指令被渲染为原生UI）。

要解决此问题，您可以完全替换它（我不建议，您的应用程序的性能可能会受到影响）。

或者只是将此代码添加到<super-navbar>的内容内容中，在您的情况下getting-started.html

<super-navbar-button onclick="supersonic.ui.drawers.open('left')" >
    &equiv;
</super-navbar-button>

如何在Appgyver Steroids中创建自定义Web视图

2 个答案: