向下滑动时反转滑块

Question

我按照这篇文章中的垂直可刷卡片滑块.

这个问题有两个部分.

我无法理解滑下时如何反转滑块的方向？

这是相关的代码集 - 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.
截至目前,当滑动 - 向前滑动时,滑块仅在一个方向上移动.我希望了解向滑块添加向后移动的实现.

2.关于表现

此外,requestAnimationFrame在刷卡时提供顺畅的体验真的很有帮助.但是DOM中应该有多少张卡有限制吗？我将调用一个API服务来获取内容,因为它将返回媒体,所以只需将opacity设置为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)这修复了三张卡中仅更新两张的错误。

现在尝试单击“向左”或“向右”几次，然后单击“顶部”几次。每次单击“顶部”时，您都会看到一张卡片返回。

想必您会想要制作一个新按钮“底部”而不是重新连接“顶部”，并且您可能还希望对更改进行限制，currentPosition以便您不能超出第一张/最后一张卡片，但这至少应该得到你开始了。

我希望这有帮助。