谷歌AMP:如何在AMP中进行无限滚动？
在谷歌AMP中实现无限滚动可以通过使用AMP的动态内容组件和AMP的分页功能来实现。下面是一种实现无限滚动的方法：
- 使用AMP的动态内容组件：AMP提供了
<amp-list>和<amp-bind>组件，可以实现动态加载内容。通过使用<amp-list>组件，可以将数据源与页面绑定，并在滚动到页面底部时加载更多内容。 - 设置分页功能：为了实现无限滚动，需要将内容分页加载。可以通过在URL中添加参数来实现分页，例如
?page=2表示加载第二页的内容。然后在服务器端根据参数来返回相应的内容。 - 监听滚动事件：使用
<amp-list>的load-more属性可以监听滚动事件，并在滚动到页面底部时触发加载更多内容的操作。 - 加载更多内容：当滚动到页面底部时，使用
<amp-bind>组件来更新URL中的分页参数，并重新加载内容。 - 显示加载状态：在加载更多内容时，可以使用
<amp-state>和<amp-list>的[loading]属性来显示加载状态，以提高用户体验。
下面是一个示例代码，演示如何在谷歌AMP中实现无限滚动：
<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>AMP Infinite Scroll</title>
<link rel="canonical" href="https://www.example.com/amp-infinite-scroll">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
<h1>AMP Infinite Scroll</h1>
<amp-state id="page">
<script type="application/json">
{"value": 1}
</script>
</amp-state>
<amp-list width="auto" height="300" layout="fixed-height" src="https://www.example.com/api/content?page=1" load-more="auto" [src]="`https://www.example.com/api/content?page=${page.value}`">
<template type="amp-mustache">
<!-- Render your content here -->
<div class="item">
<h2>{{title}}</h2>
<p>{{content}}</p>
</div>
</template>
<div overflow="" [overflow]="loading ? 'hidden' : 'auto'">
<div placeholder="" [placeholder]="loading ? 'true' : 'false'"></div>
<div fallback="" [fallback]="loading ? 'true' : 'false'"></div>
</div>
</amp-list>
<amp-bind mousedown="loadMore" on="tap:loadMore">
<button [hidden]="loading">Load More</button>
<div [hidden]="!loading">Loading...</div>
</amp-bind>
<script>
function loadMore() {
var page = document.getElementById('page');
page.value += 1;
}
</script>
</body>
</html>在上述示例中，<amp-list>组件用于显示内容列表，通过src属性绑定数据源，并使用load-more属性监听滚动事件。<amp-bind>组件用于更新分页参数和显示加载状态。通过点击"Load More"按钮或触发tap:loadMore事件来加载更多内容。
请注意，上述示例中的URL和API仅作为示例，实际应用中需要根据具体情况进行修改。
推荐的腾讯云相关产品：腾讯云CDN、腾讯云COS、腾讯云云服务器、腾讯云云数据库MySQL等。你可以在腾讯云官网上找到这些产品的详细介绍和文档。
参考链接：
- AMP官方文档：https://amp.dev/documentation/
- 腾讯云CDN产品介绍：https://cloud.tencent.com/product/cdn
- 腾讯云COS产品介绍：https://cloud.tencent.com/product/cos
- 腾讯云云服务器产品介绍：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL产品介绍：https://cloud.tencent.com/product/cdb_mysql
相关·内容
1回答
我正在制作一个无限滚动和放大器列表，无法找到如何urlencode (更改)接收到的JSON-数据值为每个页面加载。这是我的工作代码安培列表无限滚动： layout="responsive" load-more=">
因此，我的问题是:如何在客户端对"{{.}}“值进行url
浏览 4提问于2020-01-29得票数 1
回答已采纳
我开始在我的Rails 5.2应用程序中实现AMP页面。在台式机上，我使用的是Will Paginate gem。@products = @products.order('price DESC
浏览 1提问于2020-09-04得票数 0
1回答
现在，我们正在重新工作我们的AMP网页，并试图保持他们尽可能接近非AMP版本。但是，由于几个原因，我们目前无法在AMP上实现这个javascript计算器。因此，为了在非AMP页面上显示计算结果，我们正在考虑将+和-按钮包含到带有GET param的非AMP版本的链接中。不过，我们担心这会影响我们的爬行预算，因为Googlebot很可能会为数百万AMP页面中的每一个按下这两个按钮。
这种恐惧是否正当，如果是，如何处理这种情况？非常感谢!
浏览 0提问于2020-06-25得票数 0
回答已采纳
我的网站是基于非amp页面，现在我已经开发了amp页面和amp故事，每个非amp页面，应该如何引用页面？我已经尝试使用两个"rel=canonical“，但我在谷歌搜索控制台得到错误，当添加两个AMPHTML链接谷歌停止显示我的放大器在搜索结果。我如何在我的非amp页面中引用我的amphtml和AMP故事，以及我应该如何在AMP页面中引用我的页面？我如<
浏览 6提问于2019-08-11得票数 1
1回答
这里有一个例子(注意cnn.com下面的. thingy )如何在AMP中实现类似滑块的行为？我查看了amp-next-page ()，它只提供无限滚动。
浏览 4提问于2018-11-24得票数 0
因此，谷歌宣布了加速移动页面(AMP) 那么，移动浏览器何时或如何决定显示AMP内容呢？是否会有在HTTP报头中发送AMP url的规范？还是有别的办法？
浏览 0提问于2015-10-08得票数 6
我们计划使用AMP来显示桌面页面，并且我们有一些事件不适合在这里提供的触发器中使用：。我查看了一下window.AMP对象，但找不到任何有用的东西。看起来分析的东西可能在某个私有对象中。
浏览 0提问于2016-05-20得票数 0
“如何在谷歌搜索中增强我的AMP页面。例如，我在谷歌搜索栏中有搜索牛仔裤、T恤等，但不显示我的AMP页面。那么如何在谷歌搜索中增强我的AMP搜索结果。”
浏览 0提问于2019-10-22得票数 0
1回答
然后检查我的网站在这个工具，我只是害虫我的网站的网址，这给我错误按摩“不是一个AMP页面”，现在如何知道我的网站是否兼容安培。
在移动视图中，我的站点在普通视图中打开，它不会在AMP页面视图中打开。
浏览 0提问于2019-02-19得票数 0
回答已采纳
我已经将谷歌地图嵌入到我的网站的iframe中：
<iframe src="http://www.map-generator.net/extmap.php?name=Spot&address=los%20angeles%2C%20ca&width=614&height=244&maptype=map&zoom=14&</em
浏览 0提问于2011-02-19得票数 24
回答已采纳
我有一个包含位置代码的表格(我们通过右键单击从谷歌地图获得，然后选择“这里是什么”)我必须添加此位置代码作为替代变量。但我不知道我必须添加的链接是什么，我的位置代码只能获得地图，而不是谷歌地图的整个页面。e.g那个链接给了谷歌的整个页面，但我只需要地图来显示在Facny Box中。
浏览 1提问于2011-12-26得票数 0
如何在XML中编写OR关键字？#if (define A && define B) || (define C && !define D)
我只能找到这些：<表示<小于，>表示>大于，&表示& &符号，'表示'撇号，"表示<代码>D10<
浏览 201提问于2017-03-01得票数 2
2回答
我正在使用Wordpress上的SEOFrog来显示网站的AMP版本。它工作得很好，但有一个小问题，特别是对于像Plus500这样的附属网站(有非常严格的跟踪)。当我访问我的网站(例如：google.it/amp/www.mercati24.com/come-funziona-plus500/amp/?client=safari)的AMP版本时，我点击了broker Plus500的某个附属链接，如plus500.com/it/Mark
浏览 2提问于2016-10-13得票数 3
4回答
禁用地图滚动打开街道地图
、、、
如何在打开的地图iframe中禁用鼠标交互或滚动？我有以下内容，我放了属性scrollwheel="false"，有没有一种方法可以通过css禁止滚动或通过css进行交互？bbox=-123.21233510971068%2C49.260691198361066%2C-123.18484783172607%2C49.27329289319553&layer=mapquest&marker=49.266992448098
浏览 28提问于2016-09-28得票数 4
回答已采纳
有一些内容从服务器获取，并显示在浏览器中的新页面上。例如，内容是但是，当它在web页面代码中呈现时， top.consoleRef
浏览 3提问于2014-08-04得票数 1
回答已采纳
我使用的是wordpress的AMP插件。我遵循了来自的谷歌指南，但搜索控制台告诉我，AMP页面的结构化数据元素存在问题。上的AMP页面示例
结构化数据测试工具找不到错误。我知道AMP的要求更严格，但我找不到问题所在。有人能帮我吗？
浏览 2提问于2016-05-14得票数 0
7回答
我之前读到过，这有一个特定的名字。假设我在mysite.com上，我点击了www.google.com，当我进入google.com时，在顶部有一个很大的MYSITE.com栏，它很容易让我回到MYSITE.com。这叫什么，Drupal中有这个插件吗？
浏览 0提问于2011-11-30得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
