設置拇指帶右箭頭極限的最佳方法是什麼？

Question

這是我的sideThumb功能與評論。 this.panos是拇指的數量，而this.translateX是拇指被移動的像素的數量。

slideThumbs (direction) { // slide to left or right 
    const thumbWidth = 160 + 6 // plus padding 
    const visibleThumbsWidth = thumbWidth * 5 // slide 5 thumbs at a time 

    // exclude last thumb 
    const totalThumbsWidth = thumbWidth * (this.panos.length - 1) 
    if (direction === 'left' && this.translateX !== 0) { 
    this.translateX += visibleThumbsWidth 
    } 
    if (direction === 'right' && this.translateX !== -totalThumbsWidth) { 
    this.translateX -= visibleThumbsWidth 
    } 
} 

最終結果：

transform: translate(-830px, 0px); // clicking the right arrow one time 
transform: translate(-1660px, 0px); // and two times 

設置左箭頭的限制很簡單：不離開功能運行，如果this.translateX是0。設置右箭頭的限制很難。使用-totalThumbsWidth是不可靠的，因爲11和14 panos應該帶來相同的結果（使用戶按右箭頭2次）。

什麼是解決這個問題的最好方法是什麼？

編輯：

一些數學，我提出：

6 thumbs => can click right arrow 1 time 
11 thumbs => can click right arrow 2 times 
16 thumbs => can click right arrow 3 times 

5 * x + 1 = 16 // this is how I get x in the third example 
x = (this.panos.length - 1)/5 // what to do with this? 

我相信我能在數學計算中使用。

Answer 1

你可以嘗試這樣的事情，但沒有小提琴，我不能確認它可以工作在你的具體情況

slideThumbs (direction) { // slide to left or right 
    const thumbWidth = 160 + 6 // plus padding 
    const currentTilePosition = (this.translateX/thumbWidth) + 5; // get the current number for the last visible tile/we +5 because translateX starts at 0 
    const tilesToGo = (this.panos.length - currentTilePosition) - 1; // how many tiles to go? 

    var incrementThumbs = thumbWidth * 5 // slide 5 thumbs at a time 

    if (direction === 'right' && tilesToGo < 5) { 
     if (tilesToGo === 0) { 
     incrementThumbs = 0; 
     } else if { 
     incrementThumbs = thumbWidth * tilesToGo; 
     } 
    } 

    if (direction === 'left' && currentTilesPosition % 5 !== 0) { 
    incrementThumbs = thumbWidth * (currentTilesPosition % 5); 
    } 

    if (direction === 'left' && this.translateX !== 0) { 
    this.translateX += incrementThumbs 
    } 
    if (direction === 'right') { 
    this.translateX -= incrementThumbs 
    } 
} 

這樣做，這樣也保證了最後一張牌總是齊平，在屏幕右側的情況下，瓷磚的總量不是5的倍數，我還添加了一些代碼以方便從這種情況向左移動，希望它可以幫助

Answer 2

我終於定下這樣的限制：

const thumbWidth = 166 // thumb width plus padding 160 + 6 
    const visibleThumbsWidth = thumbWidth * 5 

    const rightArrowClicks = (-this.translateX/thumbWidth) + 6 
    console.log('TRANSLATE LENGTH', (-this.translateX/thumbWidth) + 6) 
    console.log('PANO LENGTH', this.panos.length) 
    if (direction === 'left' && this.translateX !== 0) { 
    this.translateX += visibleThumbsWidth 
    } 
    if (direction === 'right' && rightArrowClicks <= this.panos.length) { 
    this.translateX -= visibleThumbsWidth 
    } 

-this.translateX/thumbWidth是已經移動到左側大拇指的數量。至於6 ...不知道爲什麼它與這個數字一起工作。我用控制檯日誌達到了這個解決方案。如果有人能向我解釋我自己的代碼，我會很高興。