如何最佳设置拇指条的右箭头限制？

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个全景图应该带来相同的结果（使用户能够按两次右箭头）。

我应该如何最好地解决这个问题？

编辑：

我做了一些数学计算：

 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?

我确定我可以在数学计算中使用这个。

- alex

---

你能提供一个 Fiddle 吗？ - Manticore

在你的填充计算中使用幻灯片数量。 - vijay kani

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的倍数的情况下，最后一块瓷砖始终与屏幕的右侧齐平。我还添加了一些代码来便于从这种情况向左移动，希望有帮助。

- deowk

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...不确定为什么它能与那个数字配合使用。我通过控制台日志找到了这个解决方案。如果有人能解释我的代码，我会很高兴。

- alex