Question

我使用Polymer Starter Kit及其app-router创建了一个项目。

我的my-app.html有像这样的视图的选择器..

<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
      <my-view1 name="view1"></my-view1>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
      <my-view4 name="view4"></my-view4>
      <my-view5 name="view5"></my-view5>
      <my-view6 name="view6"></my-view6>
    </iron-pages>

我有一个组件my-view1.html，其中我有div与href标签

<div>God 1 <a href="#gotogod" class="link">Jump to example</a> </div>

我在文件的其他地方

<p id="gotogod">
  God is great
</p>

虽然我没有收到任何错误，但当我点击链接时它并没有跳到段落。当我将鼠标悬停在链接上时，我确实

http://localhost:8080/view1#gotogod

但该页面并没有跳到那个位置。

我为href尝试了各种组合而没有运气。

请帮忙。

Answer 1

HTML元素：

<a on-click="scrollIntoView" section-id="gotogod">

Javascript功能：

scrollIntoView(e) {
   let sectionId = e.target.getAttribute('section-id');
   this.$[sectionId].scrollIntoView();
}

Answer 2

好的，您需要对app-route保持警惕，当您要更改路线时，您应该通过应用路线进行更改。

我这样做（有点）：

<app-location route="{{ route }}"></app-location>
<app-route route="{{ route }}"
           pattern="/:page"
           data="{{ routeData }}"
           tail="{{ subroute }}"></app-route>

<iron-selector attr-for-selected="route"
               selected="[[ page ]]"
               role="navigation">
    <a route="editor" href="/editor">Editor</a>
    <a route="analyze" href="/analyze">Analyze</a>
    <a route="community" href="/community">Community</a>
</iron-selector>

<iron-pages role="main"
            attr-for-selected="route"
            selected="[[ page ]]">
    <my-editor route="editor"></my-editor>
    <my-analyze route="analyze"></my-analyze>
    <my-community route="community"></my-community>
</iron-pages>

<script>
     Polymer({ 
         is:'my-element',
         properties: {
             page: {
                 type: String,
                 notify: true,
                 reflectToAttribute: true,
                 observer: "_pageChanged"
             }
         },

         observers: [
             "_routePageChanged(routeData.page)"
         ],

         listeners: {
             "requestChangeRoute": "_changeRoute"
         },

         attached: function(e) {
             // Lazyload the views as soon as the AppShell has been Painted
             this.importHref(
                 this.resolveUrl("my-editor.html"), null, null, true);
             this.importHref(
                 this.resolveUrl("my-analyze"), null, null, true);
             this.importHref(
                 this.resolveUrl("my-community"), null, null, true);

             // If the application is reloaded, redirect to /analyze
             if(this.page != "analyze"){
                 this.set("route.path", "/analyze");
             }
         },

         _changeRoute: function(e) {
             this.set("route.path", e.detail.requestRoute);
         },

         _routePageChanged: function(page) {
             this.page = page || "analyze";
         }
     })
</script>

在定义路径的主页面上，您可以使用带路径的href进行导航，但是当您在某些页面元素内部时，如果没有定义应用程序路径，您应该询问对于您使用函数_changeRoute而不是href通过app-route更改路径的主页面，此调用如下所示：

this.fire("requestChangeRoute", {
    route: "/editor"
});

通过这种方式，您可以确保app-route正在处理导航并且每个页面都能正常工作，您甚至可以设置要通过此功能传递的验证或参数。

Answer 3

似乎这个答案就是你要找的： Polymer scroll to a specific div

你可以这样做：

<a href="#gotogod" class="link" on-click="_goToGoScroll">

在Polymer元素的代码中：

_goToGoScrool() {
  this.$.gotogod.scrollIntoView();
}

href到另一个元素在Polymer中不起作用

3 个答案: