使用Polymer的水平滚动

Question

图像中的部分表示People also search for,有一个可滚动的项目的水平列表.我要用聚合物做同样的事情,但找不到类似的东西.我已经实现了垂直列表,但不确定横向列表.另一个问题是,是否可以在这种情况下使用类似于组件的viewpager？Paper-Tabs确实提供了此功能,但滑动手势不起作用.仅当我们单击选项卡时,页面才会更改.

Answer 1

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

\n\n

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

\n\n

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

\n\n

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

\n\n

\r\n

\r\n

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

\r\n

window.addEventListener(\'WebComponentsReady\', () => {\r\n  class XFoo extends Polymer.Element {\r\n    static get is() { return \'x-foo\'; }\r\n\r\n    static get properties() {\r\n      return {\r\n        suggestions: {\r\n          value: () => [\r\n            {title: \'polymer gestures\', url: \'https://www.google.com/search?q=polymer+gestures\'},\r\n            {title: \'polymer elements\', url: \'https://www.google.com/search?q=polymer+elements\'}\r\n          ]\r\n        }\r\n      };\r\n    }\r\n  }\r\n  customElements.define(XFoo.is, XFoo);\r\n\r\n  customElements.define(\'x-suggestions\', class extends Polymer.Element {\r\n    static get is() { return \'x-suggestions\' }\r\n\r\n    static get properties() {\r\n      return {\r\n        suggestions: Array\r\n      };\r\n    }\r\n\r\n    _onClickFeedback() {\r\n      console.log(\'feedback\');\r\n    }\r\n\r\n    _onClickClose() {\r\n      this.dispatchEvent(new CustomEvent(\'close\', {detail: {el: this}}));\r\n    }\r\n  });\r\n});

\r\n

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

\r\n

\r\n

\r\n

\n\n

演示

\n