在amp-list中显示点击项目的价格,可以通过以下步骤实现:
[
{
"name": "项目1",
"price": "$10"
},
{
"name": "项目2",
"price": "$20"
},
{
"name": "项目3",
"price": "$30"
}
]
<amp-list width="auto" height="100" src="your-data-source-url" layout="fixed-height">
<template type="amp-mustache">
<div>
<h3>{{name}}</h3>
<p>价格: {{price}}</p>
</div>
</template>
</amp-list>
在上述示例中,amp-list组件通过src
属性指定数据源的URL,并使用amp-mustache模板来定义每个项目的显示格式。{{name}}
和{{price}}
是模板中的变量,会动态替换为数据源中对应项目的名称和价格。
const express = require('express');
const app = express();
app.get('/data', (req, res) => {
const data = [
{
"name": "项目1",
"price": "$10"
},
{
"name": "项目2",
"price": "$20"
},
{
"name": "项目3",
"price": "$30"
}
];
res.json(data);
});
app.listen(3000, () => {
console.log('API server running on port 3000');
});
上述示例中的API接口监听在3000端口,并在访问/data
路径时返回数据源。
src
属性指向API接口的URL,例如src="http://your-api-server.com/data"
。通过以上步骤,当用户访问包含amp-list组件的页面时,将会显示项目列表和对应的价格信息。用户点击某个项目时,可以在页面上直接显示该项目的价格。
推荐的腾讯云相关产品:腾讯云函数(Serverless 云函数计算服务),腾讯云API网关。这些产品可以帮助你更好地搭建和管理后端服务,并为前端应用提供数据支持。了解更多关于腾讯云函数的信息,请访问腾讯云函数产品介绍。了解更多关于腾讯云API网关的信息,请访问腾讯云API网关产品介绍。
请注意,以上答案仅供参考,具体实现方式可能因开发环境和需求而异。
领取专属 10元无门槛券
手把手带您无忧上云