这个问题有两个部分.
我无法理解滑下时如何反转滑块的方向？
这是相关的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.
截至目前,当滑动 – 向前滑动时,滑块仅在一个方向上移动.我希望了解向滑块添加向后移动的实现.
2.关于表现
此外,requestAnimationFrame确实有助于在滑动时提供流畅的体验.但是DOM中应该有多少张卡有限制吗？我将调用一个API服务来获取内容,因为它将返回媒体,所以只需将opacity设置为0以帮助减少内存使用？
作者争辩说删除DOM会强制浏览器重新绘制,这会对性能产生重大影响吗？但是不是那个虚拟列表吗？在这种情况下,性价比是多少？
解决方法
要重新连接“顶部”按钮以向后移动,您只需进行以下更改：
>在onSwipeTop()中更改currentPosition = currentPosition 1; to currentPosition = currentPosition – 1;
>同样在onSwipeTop()中更改transformUi(0,-1000,topObj); to transformUi(0,topObj);.这隐藏了卡片上升动画.
>在updateUi()中,更改i< (currentPosition items)到i< =(currentPosition items).这修复了三个卡中只有两个更新的错误.
现在尝试单击“向左”或“向右”几次,然后单击“顶部”几次.每次单击“顶部”时,您都会看到一张卡片返回.
大概你想要制作一个新的按钮“Bottom”而不是重新连接“Top”,你可能还想对currentPosition的更改加以限制,这样你就不能超越第一张/最后一张牌,但这应该至少帮助你
我希望这有帮助.
