根據視口大小切換滑動動畫

Question

我在嘗試修改某些代碼時遇到了一些麻煩。

我使用的是來自Google的示例代碼。 在您的網站上添加觸控

我稍稍修改了代碼，但是麻煩似乎是當我更改了onload和onresize窗口事件處理程序的結構時。

我要實現的是僅在視口大小為800px或更小“按頁面加載”或調整窗口大小以滿足此要求時才初始化滑動功能。

我想發生的是：

如果頁面加載時視口大小> 800px，則不要初始化滑動功能。

如果頁面加載時視口大小小於等於800像素，則初始化滑動功能。

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

更新

我能夠找出我的問題！

由於缺乏更好的理解，我不得不回頭使用“ Regular”進行循環。

條件1我首先必須將函數包裝在lambda函數中，以執行“ Onload”或“ onResize”。

條件2然后，我檢查兩個函數是否window.innerWidth <=800。如果窗口大小大於800，則數組的長度設置為0。否則，它將創建數組。

條件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) }