Question

目前我们在我们的网站上有一个滑块如下。

我们可以看到指针的位置（要价箭头）基于Fair Condition, Good Condition and Asking Price值而改变。这个值来自api然后我们使用javascript绑定它。我们使用某个函数计算指针的位置（要价的箭头），然后使用left我们将设置位置。

e.g。对于显示指针的标签的样式属性的第一个图像值是left: 85%，并且显示指针的标签的样式属性的图像值是left: 40%

现在问题是当我们将此页面转换为AMP时，我们无法根据api响应设置指针的位置。

一种可能的方法是创建100类这样的东西

.left-21{left: 21%}
.left-51{left: 51%}

根据api的响应，我们可以使用amp-bind将此类添加到div（显示指针）。但这不是正确的方式。

我们还有其他方法可以在放大器中实现这个目标吗？

Answer 1

使用UI Components > Form Elements > Range Input

<input type="range" min="1" max="100" value="20" class="slider" id="myRange">

使用AMP-BIND更改输入值

＆＃13;

    .slider {
max-width:273px;
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: url(https://s17.postimg.org/z9in37267/image.png) no-repeat 0px 10px;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
}


.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 21px;
    height: 31px;
    background: url(https://s17.postimg.org/8og47pke7/image.png) no-repeat;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: url(https://s17.postimg.org/8og47pke7/image.png) no-repeat;
    cursor: pointer;
}

＆＃13;

<input type="range" min="1" max="100" value="20" class="slider" id="myRange">

＆＃13;

Answer 2

关于如何在AMP页面的<body>元素上添加多个动态CSS类名，您可以按照此page进行操作。 AMP Dynamic CSS Classes扩展将amp-referrer-*和amp-viewer CSS类添加到元素上。请查看 AMP By Example 的amp-dynamic-css-classes示例。请注意，amp-dynamic-css-class标记提供的AMP动态CSS类为少数条件启用布尔逻辑

如何将动态样式应用于AMP页面？

2 个答案: