使用Polymer的水平滚动

Question

图像中标有library(ggplot2) ggplot(data=pc_label) + geom_point(aes(x=PC1, y=PC2, colour=y)) 的部分，有一个可滚动的项目的水平列表。我要用聚合物做同样的事情，但找不到类似的东西。我已经实现了垂直列表，但不确定横向列表。 另一个问题是，是否可以在这种情况下使用类似于组件的viewpager？ Paper-Tabs确实提供了此功能，但滑动手势不起作用。仅当我们点击标签页时，页面才会更改。

Answer 1

Google搜索中的可滚动建议框是一个带有水平滚动溢出的简单框（并且不像标签视图中那样分页）。该建议框的滚动部分可以使用两个嵌套的div容器轻松实现，外部div样式为overflow-x: auto，内部div样式为{{1} }，如本例所示：

white-space: nowrap

overflow-x: auto告诉浏览器渲染滚动条并在溢出内容溢出边缘时剪切溢出内容。

white-space: nowrap在发生行溢出时禁用元素换行，以便元素保持在同一行。

<div style="overflow-x: auto">
  <div style="white-space: nowrap">
    <template is="dom-repeat" items="[[suggestions]]">
      ...
    </template>
  </div>
</div>

window.addEventListener('WebComponentsReady', () => {
  class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }

    static get properties() {
      return {
        suggestions: {
          value: () => [
            {title: 'polymer gestures', url: 'https://www.google.com/search?q=polymer+gestures'},
            {title: 'polymer elements', url: 'https://www.google.com/search?q=polymer+elements'}
          ]
        }
      };
    }
  }
  customElements.define(XFoo.is, XFoo);

  customElements.define('x-suggestions', class extends Polymer.Element {
    static get is() { return 'x-suggestions' }

    static get properties() {
      return {
        suggestions: Array
      };
    }

    _onClickFeedback() {
      console.log('feedback');
    }

    _onClickClose() {
      this.dispatchEvent(new CustomEvent('close', {detail: {el: this}}));
    }
  });
});

html {
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

demo