javascript - 向下滑动时反转 slider

Question

我关注了this article用于垂直滑动卡片 slider 。

这个问题有两个部分。

<强>1。我不明白如何在向下滑动时反转 slider 的方向？

这是相关的codepen - https://codepen.io/bmarcelino/pen/vRYPXV

更新卡片的相关函数

function updateUi() {
    requestAnimationFrame(function(){
        elTrans = 0;
        var elZindex = 5;
        var elScale = 1;
        var elOpac = 1;
        var elTransTop = items;
        var elTransInc = elementsMargin;

        for(i = currentPosition; i < (currentPosition + items); i++){
            if(listElNodesObj[i]){
                listElNodesObj[i].classList.add('stackedcards-bottom', 'stackedcards--animatable', 'stackedcards-origin-bottom');

                listElNodesObj[i].style.transform ='scale(' + elScale + ') translateX(0) translateY(' + (elTrans - elTransInc) + 'px) translateZ(0)';
                listElNodesObj[i].style.webkitTransform ='scale(' + elScale + ') translateX(0) translateY(' + (elTrans - elTransInc) + 'px) translateZ(0)';
                listElNodesObj[i].style.opacity = elOpac;
                listElNodesObj[i].style.display = 'block';
                listElNodesObj[i].style.zIndex = elZindex;

                elScale = elScale - 0.04;
                elOpac = elOpac - (1 / items);
                elZindex--;
            }
        }

    });

};

我不是特别精通 Javascript。
截至目前，滑动时 slider 仅沿一个方向移动 - 向前。我希望了解向 slider 添加向后移动的实现。

<强>2。关于性能

此外，requestAnimationFrame 确实有助于在滑动时提供流畅的体验。但是 DOM 中应该有多少张卡片有限制吗？我将调用 API 服务来获取内容，因为它会返回媒体，所以简单地将不透明度设置为 0 是否有助于以任何方式减少内存使用？

作者认为移除 DOM 会强制浏览器重新绘制，这会显着影响性能吗？但是那个虚拟列表不是吗？此类场景的性价比如何？

Answer 1

这不会是一个完整的答案，但鉴于没有其他人做出回应，我会尝试回答您问题的第 1 部分。请注意，这只是一个示例，可帮助您了解如何使卡片倒退，而不是生产就绪的解决方案。

要重新连接“顶部”按钮以向后移动，您只需进行以下更改:

• 在 onSwipeTop()更改 currentPosition = currentPosition + 1;至 currentPosition = currentPosition - 1;
• 也在onSwipeTop()更改 transformUi(0, -1000, 0, topObj);至 transformUi(0, 0, 0, topObj); .这隐藏了卡片上升动画。
• 在 updateUi()更改 i < (currentPosition + items)至 i <= (currentPosition + items) .这修复了三张卡片中只有两张更新的错误。

现在尝试点击左或右几次，然后点击顶部几次。每次点击顶部时，您应该会看到一张卡片。

大概您会想要创建一个新按钮“Bottom”而不是重新布线“Top”，并且您可能还想限制对 currentPosition 的更改。所以你不能超越第一张/最后一张卡片，但这至少应该让你开始。

希望对您有所帮助。