如何设定 滚动目标到聚合物入门套件的“文档”
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何设定 滚动目标到聚合物入门套件的“文档”相关的知识,希望对你有一定的参考价值。
我打算通过将scroll-target
设置为"document"
来实现与PSK v3一起使用的无限卷轴,但它对PSK不起作用。以下是代码段:
<iron-scroll-threshold id="threshold"
scroll-target="document"
on-lower-threshold="queryMoreData">
<iron-list items="[[items]]" grid>
<template>
<div>
<div class="content">
item: [[item.n]]
</div>
</div>
</template>
</iron-list>
</iron-scroll-threshold>
我用纯html测试了scroll-target="document"
,它运行良好。我想知道当用户滚动到特定页面/视图的末尾时,如何设置PSK来触发事件。
显然,你需要在scroll-target
中使用以下代码将<iron-scroll-threshold>
的scroll-target
设置为<app-header>
的ready()
: -
ready() {
{ // Set scroll target for <iron-scroll-threshold>
let myApp = document.querySelector('my-app');
let appHeader = myApp.shadowRoot.querySelector('app-header');
this.$.threshold.scrollTarget = appHeader.scrollTarget;
}
}
有时候,你的滚动位置在开始时位于足够低的位置,而queryMoreData
的功能则是起火位置。在此函数中,您需要通过将clearTriggers
方法调用到queryMoreData
函数来清除阈值:
queryMoreData() {
//check if you have more data to load than
ironScrollTheshold.clearTriggers();
}
在此之后,假设可滚动区域中的内容已经增长,它将再次开始监听滚动位置以再次达到阈值。
您必须将iron-scroll-threshold
元素的scroll-target属性设置为'document'。
另请注意,iron-list
的scroll-target属性设置为iron-scroll-threshold
元素的id - 'threshold'。
<iron-scroll-threshold scroll-target="document" id="threshold" on-lower-threshold="loadMoreData" lower-threshold="100">
<iron-list id="list" items="[[items]]" as="item" scroll-target="threshold" grid>
<!-- template -->
</iron-list>
</iron-scroll-threshold>
以上是关于如何设定 滚动目标到聚合物入门套件的“文档”的主要内容,如果未能解决你的问题,请参考以下文章
Elasticsearch全文检索技术 一篇文章即可从入门到精通(Elasticsearch安装,安装kibana,安装ik分词器,数据的增删改查,全文检索查询,聚合aggregations)(代码片
[架构之路-49]:目标系统 - 系统软件 - Linux下的网络通信-5-快速数据平面开发套件DPDK - 快速部署软件入门指南