如何使用Google AMP中的amp-bind动态更改/更新图像（） _amp-bind

本文概述

HTML代码实例
HTML代码实例

文章图片
有时你想向AMP页面添加自定义交互性, 以使页面看起来更加用户友好和用户调用。尽管AMP的预建组件受到限制, 但还是通过amp-bind来解决此问题。它可以帮助开发人员在不使用AMP预制组件的情况下向页面添加自定义交互性。你可以使用amp-bind在用户与页面交互时动态更改文本。
【如何使用Google AMP中的amp-bind动态更改/更新图像（）】设定：要在页面中使用amp-bind, 必须将其脚本导入文档的标题中。
HTML代码实例

< script async custom-element = "amp-bind" src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js"> < /script>

Google AMP的放大器绑定包括三个主要概念：

州：状态变量负责根据用户操作在页面上进行更新。定义状态变量非常重要。
表达：它们就像用于引用状态的JavaScript表达式一样。
捆绑：它们是一种特殊的属性, 用于通过表达式将元素的属性链接到状态。

例子： HTML代码实例

< !doctype html> < html amp> < head> < meta charset = "utf-8"> < title> Google AMP amp-bind< /title> < link rel = "canonical" href = "https://amp.dev/documentation/examples/components/amp-bind/index.html"> < 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-bind" src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js"> < /script> < style amp-boilerplate> body { -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both; animation: -amp-start 8s steps(1, end) 0s 1 normal both; } @-webkit-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-moz-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-ms-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-o-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } < /style> < noscript> < style amp-boilerplate> body { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none } < /style> < /noscript> < style amp-custom> h1 { color: forestgreen; text-align: center; } .gfgNew { border: 5px solid crimson; } .gfgOld { border: 5px solid orange; } < /style> < /head> < body> < h1> Geeks For Geeks < /h1> < amp-state id = "gfg"> < script type = "application/json"> { "new": { "imageUrl": "https://media.srcmini.org/wp-content/cdn-uploads/gfg_200x200-min.png", "style": "gfgNew" }, "old": { "imageUrl": "https://media.srcmini.org/wp-content/uploads/20201026154131/logogfg.png", "style": "gfgOld" } } < /script> < /amp-state> < div style = "padding: 1em; "> < p> Each logo has different border color... < /p> < h4 ="'This is ' + logo + ' logo...'"> This is old logo... < /h4> < center> < amp-img width = "200" height = "200" src = "https://media.srcmini.org/wp-content/uploads/20201026154131/logogfg.png" [src]="gfg[logo].imageUrl" class = "gfgOld" [class]="gfg[logo].style"> < /amp-img> < br> < button on = "tap:AMP.setState({logo: 'new'})"> New Logo < /button> < button on = "tap:AMP.setState({logo: 'old'})"> Old Logo < /button> < /center> < /div> < /body> < /html>

输出如下：