根据视口大小切换滑动动画

Question

我在尝试修改某些代码时遇到了一些麻烦。

我使用的是来自 Google 的示例代码。 Add Touch to Your Site

我稍微修改了代码，但我的麻烦似乎在于我更改了 onload 和 onresize 窗口事件处理程序的结构。

我想要实现的是仅在视口大小为 800 像素或更小页面加载时或调整窗口大小以满足这个要求。

我希望发生的是：

如果页面加载时视口大小> 800px，则不要初始化滑动功能。

IF页面加载时视口大小为

ELSE如果调整视口大小，则根据视口大小阈值 800px 初始化或移除滑动功能。

// Shim for requestAnimationFrame from Paul Irishpaul ir
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function() {
  "use strict"

  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60)
    }
  )
})()

/* // [START pointereventsupport] */
var pointerDownName = "pointerdown"
var pointerUpName = "pointerup"
var pointerMoveName = "pointermove"

if (window.navigator.msPointerEnabled) {
  pointerDownName = "MSPointerDown"
  pointerUpName = "MSPointerUp"
  pointerMoveName = "MSPointerMove"
}

// Simple way to check if some form of pointerevents is enabled or not
window.PointerEventsSupport = false
if (window.PointerEvent || window.navigator.msPointerEnabled) {
  window.PointerEventsSupport = true
}
/* // [END pointereventsupport] */

function SwipeRevealItem(element) {
  "use strict"

  // Gloabl state variables
  var STATE_DEFAULT = 1
  var STATE_LEFT_SIDE = 2
  var STATE_RIGHT_SIDE = 3

  var swipeFrontElement = element.querySelector(".oGrid-item")
  var rafPending = false
  var initialTouchPos = null
  var lastTouchPos = null
  var currentXPosition = 0
  var currentState = STATE_DEFAULT
  var handleSize = 10

  // Perform client width here as this can be expensive and doens't
  // change until window.onresize
  var itemWidth = swipeFrontElement.clientWidth
  var slopValue = itemWidth * (1 / 2)

  // On resize, change the slop value
  this.resize = function() {
    itemWidth = swipeFrontElement.clientWidth
    slopValue = itemWidth * (1 / 2)
  }

  /* // [START handle-start-gesture] */
  // Handle the start of gestures
  this.handleGestureStart = function(evt) {
    evt.preventDefault()

    if (evt.touches && evt.touches.length > 1) {
      return
    }

    // Add the move and end listeners
    if (window.PointerEvent) {
      evt.target.setPointerCapture(evt.pointerId)
    } else {
      // Add Mouse Listeners
      document.addEventListener("mousemove", this.handleGestureMove, true)
      document.addEventListener("mouseup", this.handleGestureEnd, true)
    }

    initialTouchPos = getGesturePointFromEvent(evt)

    swipeFrontElement.style.transition = "initial"
  }.bind(this)
  /* // [END handle-start-gesture] */

  // Handle move gestures
  //
  /* // [START handle-move] */
  this.handleGestureMove = function(evt) {
    evt.preventDefault()

    if (!initialTouchPos) {
      return
    }

    lastTouchPos = getGesturePointFromEvent(evt)

    if (rafPending) {
      return
    }

    rafPending = true

    window.requestAnimFrame(onAnimFrame)
  }.bind(this)
  /* // [END handle-move] */

  /* // [START handle-end-gesture] */
  // Handle end gestures
  this.handleGestureEnd = function(evt) {
    evt.preventDefault()

    if (evt.touches && evt.touches.length > 0) {
      return
    }

    rafPending = false

    // Remove Event Listeners
    if (window.PointerEvent) {
      evt.target.releasePointerCapture(evt.pointerId)
    } else {
      // Remove Mouse Listeners
      document.removeEventListener("mousemove", this.handleGestureMove, true)
      document.removeEventListener("mouseup", this.handleGestureEnd, true)
    }

    updateSwipeRestPosition()

    initialTouchPos = null
  }.bind(this)
  /* // [END handle-end-gesture] */

  function updateSwipeRestPosition() {
    var differenceInX = initialTouchPos.x - lastTouchPos.x
    currentXPosition = currentXPosition - differenceInX

    // Go to the default state and change
    var newState = STATE_DEFAULT

    // Check if we need to change state to left or right based on slop value
    if (Math.abs(differenceInX) > slopValue) {
      if (currentState === STATE_DEFAULT) {
        if (differenceInX > 0) {
          newState = STATE_LEFT_SIDE
        } else {
          newState = STATE_RIGHT_SIDE
        }
      } else {
        if (currentState === STATE_LEFT_SIDE && differenceInX > 0) {
          newState = STATE_DEFAULT
        } else if (currentState === STATE_RIGHT_SIDE && differenceInX < 0) {
          newState = STATE_DEFAULT
        }
      }
    } else {
      newState = currentState
    }

    changeState(newState)

    swipeFrontElement.style.transition = "all 350ms ease-out"
  }

  function changeState(newState) {
    var transformStyle
    switch (newState) {
      case STATE_DEFAULT:
        currentXPosition = 0
        break
      case STATE_LEFT_SIDE:
        currentXPosition = -(itemWidth - handleSize)
        break
      case STATE_RIGHT_SIDE:
        currentXPosition = itemWidth - handleSize
        break
    }

    transformStyle = "translateX(" + currentXPosition / 2 + "px)"
    swipeFrontElement.style.msTransform = transformStyle
    swipeFrontElement.style.MozTransform = transformStyle
    swipeFrontElement.style.webkitTransform = transformStyle
    swipeFrontElement.style.transform = transformStyle

    currentState = newState
  }

  function getGesturePointFromEvent(evt) {
    var point = {}

    if (evt.targetTouches) {
      point.x = evt.targetTouches[0].clientX
      point.y = evt.targetTouches[0].clientY
      console.log(`X: ${point.x}, Y: ${point.y}`)
    } else {
      // Either Mouse event or Pointer Event
      point.x = evt.clientX
      point.y = evt.clientY
    }

    return point
  }

  /* // [START on-anim-frame] */
  function onAnimFrame() {
    if (!rafPending) {
      return
    }

    var differenceInX = initialTouchPos.x - lastTouchPos.x

    var newXTransform = (currentXPosition - differenceInX) / 2
    var transformStyle = "translateX(" + newXTransform + "px)"

    swipeFrontElement.style.webkitTransform = transformStyle
    swipeFrontElement.style.MozTransform = transformStyle
    swipeFrontElement.style.msTransform = transformStyle
    swipeFrontElement.style.transform = transformStyle

    rafPending = false
  }
  /* // [END on-anim-frame] */

  /* // [START addlisteners] */
  // Check if pointer events are supported.
  if (window.PointerEvent) {
    // Add Pointer Event Listener
    swipeFrontElement.addEventListener(
      "pointerdown",
      this.handleGestureStart,
      true
    )
    swipeFrontElement.addEventListener(
      "pointermove",
      this.handleGestureMove,
      true
    )
    swipeFrontElement.addEventListener(
      "pointerup",
      this.handleGestureEnd,
      true
    )
    swipeFrontElement.addEventListener(
      "pointercancel",
      this.handleGestureEnd,
      true
    )
  } else {
    // Add Touch Listener
    swipeFrontElement.addEventListener(
      "touchstart",
      this.handleGestureStart,
      true
    )
    swipeFrontElement.addEventListener(
      "touchmove",
      this.handleGestureMove,
      true
    )
    swipeFrontElement.addEventListener("touchend", this.handleGestureEnd, true)
    swipeFrontElement.addEventListener(
      "touchcancel",
      this.handleGestureEnd,
      true
    )

    // Add Mouse Listener
    swipeFrontElement.addEventListener(
      "mousedown",
      this.handleGestureStart,
      true
    )
  }
  /* // [END addlisteners] */
}
var swipeRevealItemElements = document.querySelectorAll(".oGrid__row")

function resizeSwipeElements(nodeList) {
  "use strict"
  // Do this so :active pseudo classes are applied.
  if (/iP(hone|ad)/.test(window.navigator.userAgent)) {
    document.body.addEventListener("touchstart", function() {}, false)
  }

  if (window.innerWidth <= 800) {
    var swipeRevealItems = Array.from(nodeList, function(item) {
      return item.resize()
    })
    console.log(swipeRevealItems)
    return swipeRevealItems
  }
}

function createSwipeElements(nodeList) {
  var swipeRevealItems = Array.from(nodeList, function(item) {
    return new SwipeRevealItem(item)
  })
  return swipeRevealItems
}


window.onload = createSwipeElements(swipeRevealItemElements)
window.onresize = resizeSwipeElements(swipeRevealItemElements)

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  background-color: #d3e2fc;
  font-family: "Roboto", sans-serif;
  color: #ecf0f1;
}

.content {
  padding: 32px;
  box-sizing: border-box;
  overflow: hidden;
}

.oGrid__row {
  position: relative;
  //width: 100%;
  height: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.oGrid-item {
  position: absolute;
  width: 100%;
  height: 60px;
  left: 0;
  top: 0;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  text-align: center;
  color: #ecf0f1;
  line-height: 44px;
  vertical-align: center;
  background-color: #4285f4;
  z-index: 10;
  -ms-touch-action: none;
  /* // [START touch-action-example] */
  /* Pass all touches to javascript */
  touch-action: none;
  /* // [END touch-action-example] */
}

<section class="content">
  <div class="oGrid__row">
    <div class="oGrid-item">Swipe Me</div>
    <button></button>
    <button></button>
  </div>
  <div class="oGrid__row">
    <div class="oGrid-item">Swipe Me</div>
    <button></button>
    <button></button>
  </div>
</section>

Answer 1

更新

我能够找出我的问题！

由于缺乏更好的理解，我不得不重新使用“常规” for 循环。

条件 1 我首先必须将我的函数包装在 lambda 函数中以执行“Onload”或“onResize”。

条件 2 然后，如果 window.innerWidth

条件 3 如果窗口被调整大小，resize 函数会检查 NodeList 中的数组是否大于 0 以循环遍历，或者如果数组大小为 0，那么它将从节点列表创建数组。

这可能不是最干净的解决方案，但它对我有用。

想法？

var swipeRevealItemElements = document.querySelectorAll(".oGrid__row")
// I have a specific condition that should only apply the swipe functions to elements whose child element count is greater than 1
var itemsArray = Array.from(swipeRevealItemElements).filter(function(item) {
  return item.childElementCount > 1
})

var swipeRevealItems = []

function swipeElementsToggle(nodeList) {
  'use strict'
  if (window.innerWidth <= 800) {
    swipeRevealItems = nodeList.map(function(item) {
      return new SwipeRevealItem(item)
    })
  } else {
    swipeRevealItems.length = 0
  }

  // We do this so :active pseudo classes are applied.
  if (/iP(hone|ad)/.test(window.navigator.userAgent)) {
    document.body.addEventListener('touchstart', function() {}, false)
  }
}

function resizeSwipeElements(nodeList) {
  "use strict";

  if (window.innerWidth <= 800) {

    if (swipeRevealItems.length == 0) {

      for (var i = 0; i < nodeList.length; i++) {
        swipeRevealItems.push(new SwipeRevealItem(nodeList[i]))
        swipeRevealItems[i].resize()
      }

    } else {
      for (var i = 0; i < nodeList.length; i++) {
        swipeRevealItems[i].resize()
      }
    }

  } else {
    swipeRevealItems.length = 0;
  }
}


window.onload = function() {
  swipeElementsToggle(itemsArray)
}
window.onresize = function() {
  resizeSwipeElements(itemsArray)
}