使用swipe.js实现WebApp页面切换异常求助：无法从首页滑至第二页

Hey there, let's figure out why your swipe.js-powered WebApp is acting up—when the first page's HTML is intact, you can't swipe to the second, but remove that code and the remaining pages work perfectly. Here are the most likely culprits:

1. Broken DOM Structure in the First Page #

Swipe.js relies on a strict container structure to identify and manage slides (usually a wrapper like .swipe-wrap with direct child elements as individual pages). If your first page has unclosed tags, misnested elements, or invalid HTML, it can mess up the entire DOM tree. For example, an unclosed <div> in the first page might accidentally wrap the second page inside it, making swipe.js think there's only one slide to work with.

Check this: Open your browser's DevTools (Elements tab) and inspect the DOM tree. Make sure all pages are direct children of the swipe container, and there are no unclosed/mismatched tags in the first page's code.

2. Event Conflicts in the First Page #

If elements in your first page have custom touch/click events (like buttons, interactive widgets), they might be interfering with swipe.js's core touch event listeners. For instance, if a script on the first page calls event.preventDefault() or event.stopPropagation() during touchmove, it can block swipe.js from detecting the swipe gesture entirely.

Check this: Temporarily remove all custom event handlers from the first page's elements. If the swipe starts working, you'll know an event conflict was the issue—you can then adjust the event code to play nice with swipe.js (e.g., add conditionals to only prevent default for specific actions).

3. Incorrect Dimensions on the First Page #

Swipe.js requires each slide to match the container's dimensions exactly. If your first page has content that makes it taller/wider than the swipe container (causing scrollbars), the browser's default scrolling behavior might override swipe.js's horizontal swipe detection. Or if the first page's dimensions are miscalculated, swipe.js can't properly calculate the slide positions for swiping.

Check this: Use DevTools' Computed tab to verify that the first page's width and height match the swipe container's dimensions. Also, make sure there's no overflow: scroll or overflow: auto set on the first page that's creating unexpected scrollbars.

4. Premature Initialization of Swipe.js #

If you initialize swipe.js before the first page's HTML is fully loaded (e.g., running the init script in the <head> without waiting for the DOM to be ready), swipe.js might only detect the first page (or partial elements) and fail to recognize the second page exists.

Check this: Move your swipe.js initialization code to the bottom of the <body> tag, or wrap it in a DOMContentLoaded event listener to ensure all HTML is parsed before swipe.js sets up the slides:

document.addEventListener('DOMContentLoaded', function() {
  new Swipe(document.getElementById('swipe-container'), {
    // your swipe options here
  });
});

Your Code Snippet for Reference #

<!DOCTYPE html> 
<html> 
<head> 
<title>Share QR</title> 
<meta name="viewport" content="width=device-width,height=devi...

内容的提问来源于stack exchange，提问作者Svein Rikard Semb