1

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

1 2

正如我们所看到的，指针（要价箭头）的位置是根据Fair Condition, Good Condition and Asking Price价值改变的。这个值是通过 api 来的，然后我们在这里使用 javascript 绑定它。我们使用一些函数计算指针的位置（要价箭头），然后使用left我们将设置位置。

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

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

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

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

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

有没有其他方法可以在 amp 中实现这一点？

4

2 回答 2

2

使用UI 组件 > 表单元素 > 范围输入 

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

使用 AMP-BIND 更改输入值

    .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;
}
<input type="range" min="1" max="100" value="20" class="slider" id="myRange">

于 2018-03-05T11:18:38.723 回答
0

您可以关注此页面，了解如何将多个动态 CSS 类名称添加到<body>AMP 页面的元素中。AMP 动态 CSS 类扩展将amp-referrer-*和amp-viewerCSS 类添加到元素中。检查此AMP By Example的amp-dynamic-css-classes示例。请注意，amp-dynamic-css-class标记提供的 AMP 动态 CSS 类为少数条件启用布尔逻辑

于 2018-03-05T07:51:22.070 回答