JavaScript Katana

Cách triển khai cử chỉ vuốt trong JavaScript (Vanilla JS + Swiper.js + TouchSwipe)

Thao tác DOM và Trình duyệt
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

.## 1. Giới thiệu

目次

Tại sao Cử chỉ Vuốt lại Quan trọng?

Với việc sử dụng rộng rãi điện thoại thông minh và máy tính bảng, tương tác cảm ứng đã trở thành một phần thiết yếu trong cuộc sống hàng ngày. Trong số đó, cử chỉ vuốt mang tính trực quan và dễ sử dụng, vì vậy chúng được áp dụng rộng rãi trong các ứng dụng di động và trang web.

Trong bài viết này, chúng tôi sẽ giải thích cách triển khai hỗ trợ cử chỉ vuốt bằng JavaScript một cách thân thiện với người mới bắt đầu. Chúng tôi sẽ bao quát mọi thứ từ các ví dụ mã cơ bản đến các thư viện hữu ích, cũng như các mẹo khắc phục sự cố.

Tại sao Cử chỉ Vuốt lại Quan trọng?

Chức năng vuốt chủ yếu được sử dụng trong các tình huống sau.

  • Thư viện ảnh và trình chiếu : Bằng cách trượt ngón tay trên màn hình, người dùng có thể dễ dàng chuyển sang ảnh hoặc nội dung tiếp theo.
  • Điều hướng trang và kiểm soát menu : Cử chỉ vuốt có thể chuyển trang hoặc mở menu.
  • Hiển thị carousel : Người dùng có thể duyệt danh sách sản phẩm hoặc các bài viết nổi bật theo dạng trượt, điều này đặc biệt hữu ích trên các trang mua sắm và tin tức.

Như vậy, chức năng vuốt đóng một vai trò rất quan trọng trong việc cải thiện trải nghiệm người dùng (UX).

Những Điều Bạn Sẽ Học Trong Bài Viết Này

  • Cách xây dựng hỗ trợ cử chỉ vuốt bằng JavaScript thuần
  • Cách thêm chức năng vuốt bằng các thư viện như Swiper.js
  • Những thách thức phổ biến trong quá trình triển khai và cách giải quyết chúng

Bằng cách đọc bài viết này, ngay cả người mới bắt đầu cũng có thể tạo ra chức năng vuốt có thể sử dụng trong các dự án phát triển thực tế.

2. Những Nguyên Tắc Cơ Bản Về Vuốt và Các Trường Hợp Sử Dụng Thông Thường

Vuốt là gì?

Vuốt là một loại giao diện dựa trên cử chỉ cho phép người dùng thực hiện các hành động bằng cách trượt ngón tay trên màn hình cảm ứng. Các cử chỉ này thường được phân thành bốn hướng: vuốt phải, vuốt trái, vuốt lên và vuốt xuống.

Với sự bùng nổ của các thiết bị cảm ứng, cử chỉ vuốt đã trở nên phổ biến—đặc biệt trên điện thoại thông minh và máy tính bảng. Trong các ứng dụng web và ứng dụng gốc, chức năng vuốt mang lại trải nghiệm trực quan, trở thành một yếu tố quan trọng để nâng cao trải nghiệm người dùng (UX).

Các Trường Hợp Sử Dụng Thực Tế Phổ Biến cho Cử Chỉ Vuốt

1. Thư viện ảnh và trình chiếu

Các giao diện cho phép chuyển ảnh hoặc slide bằng cử chỉ vuốt thường xuất hiện trong các ứng dụng thư viện ảnh và các trang giới thiệu sản phẩm. Người dùng có thể nhanh chóng truy cập ảnh tiếp theo, giúp họ tiếp tục duyệt mà không gặp khó khăn.

2. Carousel sản phẩm và nội dung nổi bật

Trên các trang thương mại điện tử, sản phẩm thường được hiển thị dưới dạng carousel để người dùng có thể vuốt qua các mục khi duyệt. Cách trình bày này vừa bắt mắt vừa giúp thu hút sự chú ý đến sản phẩm.

3. Chuyển trang và điều hướng trong ứng dụng

Trong các ứng dụng di động và ứng dụng một trang (SPA), việc chuyển màn hình bằng cử chỉ vuốt là điều phổ biến. Ví dụ, các ứng dụng tin tức thường cho phép người dùng vuốt trái hoặc phải để chuyển sang bài viết tiếp theo.

4. Trò chơi và ứng dụng tương tác

Trong các trò chơi, điều khiển dựa trên vuốt thường được sử dụng trong gameplay—ví dụ như di chuyển nhân vật hoặc chọn vật phẩm.

5. Hiển thị menu và overlay

Nhiều trang web sử dụng cử chỉ vuốt để hiển thị hoặc ẩn menu hamburger và thanh bên. Điều này đặc biệt hữu ích trên điện thoại thông minh với không gian màn hình hạn chế, vì các tính năng có thể được bố trí hiệu quả mà vẫn duy trì sự thoải mái về mặt hình ảnh.

Lợi Ích Khi Triển Khai Chức Năng Vuốt

  1. Tương tác trực quan Người dùng có thể hiểu cách sử dụng mà không cần giải thích, giúp cải thiện thiết kế UI/UX.
  2. Tương tác nhanh hơn So với việc nhấn nút, người dùng có thể chuyển trang hoặc nội dung nhanh hơn, giảm bớt sự bực bội.
  3. Thiết kế đơn giản hơn Khi tận dụng cử chỉ vuốt, bạn có thể giảm bớt các yếu tố UI như nút vật lý hoặc nút mũi tên, mang lại giao diện sạch sẽ hơn.
  4. Hỗ trợ responsive dễ dàng Vì tương tác vuốt được tối ưu cho điện thoại thông minh và máy tính bảng, chúng hoạt động tốt với thiết kế mobile‑first.

Những Điều Cần Lưu Ý Khi Triển Khai Cử Chỉ Vuốt

  1. Ngăn ngừa phát hiện sai Để tránh các hành động vô tình, bạn cần đánh giá đúng vị trí bắt đầu và kết thúc của chuyển động vuốt. Đặt khoảng cách tối thiểu cho vuốt (ngưỡng) cũng giúp ngăn chặn hành vi không mong muốn.
  2. Tương thích trình duyệt và thiết bị Hành vi sự kiện chạm có thể khác nhau trên các thiết bị di động, vì vậy cần hỗ trợ đa trình duyệt và thực hiện kiểm thử.
  3. Tối ưu hiệu năng Các tính năng vuốt có thể gây ra việc xử lý sự kiện thường xuyên, vì vậy các triển khai nên cân nhắc hiệu năng bằng cách sử dụng mã nhẹ hoặc thư viện phù hợp.

3. Triển khai Cử chỉ Vuốt bằng JavaScript Thuần

Trong phần này, chúng tôi sẽ giải thích cách triển khai hỗ trợ cử chỉ vuốt chỉ bằng JavaScript thuần mà không cần bất kỳ thư viện nào. Chúng tôi sẽ hướng dẫn qua các ví dụ cơ bản để bạn có thể hiểu cách phát hiện vuốt và kiểm tra hướng hoạt động.

Cấu trúc Cơ bản cho Phát hiện Vuốt

Đầu tiên, thiết lập các bộ lắng nghe sự kiện cần thiết để phát hiện các sự kiện chạm. Trong JavaScript, bạn thường sử dụng ba sự kiện sau.

  • touchstart : Kích hoạt ngay khi ngón tay chạm vào màn hình
  • touchmove : Kích hoạt trong khi ngón tay di chuyển trên màn hình
  • touchend : Kích hoạt ngay khi ngón tay rời khỏi màn hình

Sử dụng cơ chế này, bạn ghi lại vị trí bắt đầu và kết thúc của vuốt, sau đó tính toán hướng và khoảng cách vuốt.

Ví dụ Cơ bản: Phát hiện Hướng Vuốt

Mã sau sẽ phát hiện hướng vuốt trên màn hình và in kết quả ra console.

let startX, startY, endX, endY; // Variables for storing coordinates

// Get the coordinates when the touch starts
document.addEventListener('touchstart', function (e) {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});

// Get the coordinates when the touch ends, then detect the swipe direction
document.addEventListener('touchend', function (e) {
  endX = e.changedTouches[0].clientX;
  endY = e.changedTouches[0].clientY;

  let diffX = endX - startX; // Distance moved in X direction
  let diffY = endY - startY; // Distance moved in Y direction

  // Horizontal swipe detection
  if (Math.abs(diffX) > Math.abs(diffY)) {
    if (diffX > 0) {
      console.log('Swipe right');
    } else {
      console.log('Swipe left');
    }
  } 
  // Vertical swipe detection
  else {
    if (diffY > 0) {
      console.log('Swipe down');
    } else {
      console.log('Swipe up');
    }
  }
});

Giải thích Mã

  1. Khởi tạo biến Chuẩn bị startX, startY, endX, endY để lưu trữ tọa độ bắt đầu và kết thúc của vuốt.
  2. Ghi lại tọa độ bắt đầu bằng sự kiện touchstart Lấy tọa độ nơi chạm bắt đầu và lưu chúng làm vị trí bắt đầu.
  3. Ghi lại tọa độ kết thúc bằng sự kiện touchend và phát hiện hướng Tính hiệu số giữa tọa độ kết thúc và bắt đầu, sau đó so sánh chuyển động ngang và dọc để xác định hướng vuốt.

Điều chỉnh Độ nhạy Vuốt

Trong một số trường hợp, việc phát hiện vuốt có thể kích hoạt ngay cả khi di chuyển ngón tay rất nhỏ. Để ngăn ngừa các hành động vô tình, hãy đặt khoảng cách tối thiểu cho vuốt.

Dưới đây là một ví dụ trong đó khoảng cách tối thiểu cho vuốt được đặt là 50px.

const minSwipeDistance = 50; // Minimum swipe distance

document.addEventListener('touchend', function (e) {
  endX = e.changedTouches[0].clientX;
  endY = e.changedTouches[0].clientY;

  let diffX = endX - startX;
  let diffY = endY - startY;

  if (Math.abs(diffX) > Math.abs(diffY)) {
    // Horizontal detection
    if (Math.abs(diffX) > minSwipeDistance) {
      if (diffX > 0) {
        console.log('Swipe right');
      } else {
        console.log('Swipe left');
      }
    }
  } else {
    // Vertical detection
    if (Math.abs(diffY) > minSwipeDistance) {
      if (diffY > 0) {
        console.log('Swipe down');
      } else {
        console.log('Swipe up');
      }
    }
  }
});

Ghi chú và Mẹo Tối ưu

.1. Ngăn ngừa phát hiện sai Đặt khoảng cách tối thiểu là cần thiết để xử lý các chuyển động vuốt nhỏ hoặc không mong muốn. Ngoài ra, hãy cẩn thận để không xung đột với các cử chỉ khác như double-tap hoặc long-press.
2. Hành vi đáp ứng Vì hành vi sự kiện chạm có thể khác nhau tùy thiết bị, bạn nên kiểm tra trên nhiều thiết bị để xác nhận hành vi đúng.
3. Tối ưu hiệu năng Vì các sự kiện có thể được kích hoạt thường xuyên, hãy quản lý việc đăng ký/huỷ đăng ký listener một cách thích hợp và tránh sử dụng bộ nhớ không cần thiết.

Tóm tắt

Cho đến nay, bạn đã học cách triển khai hỗ trợ cử chỉ vuốt bằng JavaScript thuần. Chúng tôi đã đề cập đến việc xử lý sự kiện chạm cơ bản, phát hiện hướng vuốt, và đặt ngưỡng khoảng cách tối thiểu.

4. Triển khai Vuốt Hiệu quả bằng Thư viện

Trong phần này, chúng tôi sẽ giải thích cách triển khai chức năng vuốt một cách dễ dàng và hiệu quả bằng các thư viện. Chúng tôi sẽ tập trung vào hai lựa chọn phổ biến: Swiper.js đầy tính năng và TouchSwipe nhẹ, đơn giản.

1. Triển khai Vuốt với Swiper.js

Swiper.js là gì?

Swiper.js là một thư viện JavaScript giúp dễ dàng xây dựng các slider và carousel hỗ trợ vuốt. Nó cung cấp hỗ trợ đáp ứng mạnh mẽ và nhiều tính năng, phù hợp với nhiều dự án.

Các tính năng chính của Swiper.js

  • Nhẹ và nhanh : Hoạt động mượt mà với hiệu năng cao
  • Hỗ trợ đáp ứng : Dễ dàng tối ưu cho di động và máy tính để bàn
  • Tùy chọn phong phú : Hỗ trợ nút điều hướng và phân trang
  • Tùy chỉnh linh hoạt : Kiểm soát chi tiết hành vi của slider

Cách thêm Swiper.js

1. Thêm qua CDN
Thêm các liên kết sau vào file HTML của bạn.

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

2. Cấu trúc HTML cơ bản
Mã HTML dưới đây hiển thị một ví dụ slider đơn giản.

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Navigation buttons -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

3. Khởi tạo Swiper bằng JavaScript
Thêm đoạn mã sau để Swiper hoạt động.

const swiper = new Swiper('.swiper-container', {
  loop: true, // Enable looping
  pagination: {
    el: '.swiper-pagination', // Pagination selector
    clickable: true,         // Allow clicking to navigate
  },
  navigation: {
    nextEl: '.swiper-button-next', // Next button
    prevEl: '.swiper-button-prev', // Previous button
  },
  autoplay: {
    delay: 3000, // Autoplay interval (ms)
    disableOnInteraction: false,
  },
});

Các ví dụ nâng cao của Swiper.js

  • Thư viện ảnh có thanh cuộn
  • Slider có hình thu nhỏ
  • Danh sách hỗ trợ vuốt với tải dữ liệu động

2. Triển khai Vuốt đơn giản với TouchSwipe

TouchSwipe là gì?

TouchSwipe là một thư viện JavaScript nhẹ cung cấp hỗ trợ cử chỉ vuốt đơn giản. Nó hữu ích khi bạn muốn phát hiện vuốt nhanh và kiểm tra hướng với thiết lập tối thiểu.

Các tính năng chính của TouchSwipe

  • Nhẹ và đơn giản : Ít cài đặt và dễ tích hợp
  • Tối ưu cho di động : Được thiết kế riêng cho smartphone và tablet
  • Phát hiện hướng đơn giản : Phát hiện hướng vuốt bằng mã ngắn gọn

Cách thêm TouchSwipe

1. Thêm qua CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>

2. Cấu trúc HTML

<div id="swipeArea">
  Try swiping here.
</div>

3. Cấu hình TouchSwipe bằng JavaScript

$(function () {
  $("#swipeArea").swipe({
    swipe: function (event, direction) {
      if (direction === "left") {
        alert("Swiped left");
      } else if (direction === "right") {
        alert("Swiped right");
      }
    },
    threshold: 50, // Minimum swipe distance
  });
});

3. Bảng So Sánh: Swiper.js vs TouchSwipe

LibraryFeaturesTypical UseCode Volume
Swiper.jsFeature-rich with high customizationSliders and carouselsMore
TouchSwipeLightweight and simple implementationBasic swipe detectionLess

4. Cách Chọn Thư Viện Phù Hợp

  1. Chọn dựa trên nhu cầu của bạn Nếu bạn cần các thanh trượt hoặc carousel nâng cao, Swiper.js là lựa chọn tuyệt vời. Nếu bạn chỉ cần phát hiện vuốt đơn giản, TouchSwipe được khuyến nghị.
  2. Cân bằng hiệu năng và kích thước dự án Các thư viện nhẹ phù hợp cho dự án nhỏ, trong khi các thư viện đầy tính năng thích hợp hơn cho dự án lớn hoặc khi bạn cần UI/UX nâng cao.

5. Khắc Phục Sự Cố Thực Tế và Các Thực Hành Tốt Nhất

Trong phần này, chúng ta sẽ xem xét kỹ hơn các vấn đề phổ biến thường xảy ra khi triển khai chức năng vuốt và cách khắc phục chúng. Chúng tôi cũng sẽ giới thiệu các thực hành tốt nhất để xây dựng và duy trì các tính năng vuốt một cách hiệu quả.

Các Vấn Đề Thông Thường và Giải Pháp

Vấn Đề 1: Phát Hiện Vuốt Nhầm Hoặc Sai

Vấn đề: Ngay cả những chuyển động ngón tay rất nhỏ cũng có thể bị nhận dạng là một thao tác vuốt. Điều này thường xảy ra khi cuộn dọc bị hiểu nhầm là vuốt ngang.

Giải pháp: Đặt khoảng cách tối thiểu cho vuốt để chỉ nhận dạng vuốt khi chuyển động vượt qua một ngưỡng nhất định.

Ví dụ mã: Khoảng cách tối thiểu đặt là 50px

const minSwipeDistance = 50; // Minimum swipe distance

document.addEventListener('touchend', function (e) {
  let diffX = e.changedTouches[0].clientX - startX;
  let diffY = e.changedTouches[0].clientY - startY;

  if (Math.abs(diffX) > Math.abs(diffY)) {
    if (Math.abs(diffX) > minSwipeDistance) {
      console.log(diffX > 0 ? 'Swipe right' : 'Swipe left');
    }
  } else {
    if (Math.abs(diffY) > minSwipeDistance) {
      console.log(diffY > 0 ? 'Swipe down' : 'Swipe up');
    }
  }
});

Vấn Đề 2: Hành Vi Đáp Ứng Không Đủ

Vấn đề: Chức năng vuốt có thể hoạt động chính xác trên điện thoại thông minh nhưng lại hành xử không mong muốn trên máy tính bảng hoặc thiết bị để bàn.

Giải pháp:

  1. Áp dụng cài đặt dựa trên kích thước màn hình.

Ví dụ: Thêm các điểm ngắt đáp ứng trong Swiper.js

const swiper = new Swiper('.swiper-container', {
  loop: true,
  breakpoints: {
    640: {
      slidesPerView: 1,
    },
    768: {
      slidesPerView: 2,
    },
    1024: {
      slidesPerView: 3,
    },
  },
});
  1. Hỗ trợ sự kiện chuột bên cạnh các sự kiện chạm.

Vấn Đề 3: Nhấp Nháy Hoặc Rung Khi Vuốt

Vấn đề: Khi thực hiện các thao tác vuốt nhanh, màn hình có thể nhấp nháy hoặc các hoạt ảnh có thể cảm thấy giật.

Giải pháp:

  • Tối ưu hiệu suất CSS.

Ví dụ: Kích hoạt tăng tốc GPU

.swiper-container {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
  • Giới hạn các hoạt ảnh và chuyển đổi chỉ sử dụng các thuộc tính thân thiện với GPU.

Vấn Đề 4: Hành Vi Không Nhất Quán Trên Các Trình Duyệt Hoặc Thiết Bị

Vấn đề: Xử lý sự kiện chạm có thể khác nhau tùy trình duyệt, dẫn đến hành vi không mong muốn.

Giải pháp:

  • Thêm tiền tố nhà cung cấp để hỗ trợ các trình duyệt cũ.
  • Sử dụng các thư viện tương thích: Các thư viện như Hammer.js hoặc TouchSwipe đơn giản hoá việc hỗ trợ đa trình duyệt.

Các Thực Hành Tốt Nhất

1. Mô-đun hoá và Quản Lý Mã của Bạn

Đóng gói logic vuốt vào các hàm có thể tái sử dụng để cải thiện khả năng bảo trì.

Ví dụ: Đóng gói phát hiện vuốt trong một hàm

function detectSwipe(element, callback) {
  let startX, startY, endX, endY;

  element.addEventListener('touchstart', function (e) {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
  });

  element.addEventListener('touchend', function (e) {
    endX = e.changedTouches[0].clientX;
    endY = e.changedTouches[0].clientY;

    let diffX = endX - startX;
    let diffY = endY - startY;

    if (Math.abs(diffX) > Math.abs(diffY)) {
      callback(diffX > 0 ? 'right' : 'left');
    } else {
      callback(diffY > 0 ? 'down' : 'up');
    }
  });
}

// Ví dụ sử dụng
const box = document.getElementById('swipeBox');
detectSwipe(box, function (direction) {
  console.log('Đã vuốt ' + direction);
});

2. Use User Testing and Feedback

Test on real devices repeatedly and gather user feedback to identify areas for improvement.

3. Performance Optimization

  • Event optimization : Register and remove event listeners only when needed.
  • Lazy loading : Load libraries such as Swiper.js or TouchSwipe only on pages where they are required.

6. Real-World Examples and Practical Code Usage

In this section, we’ll explore how the swipe techniques covered so far can be applied in real projects, using concrete examples and code samples.

1. Creating an Image Slider (Using Swiper.js)

Overview

We’ll implement a slider commonly used in image galleries and product pages using Swiper.js. This example includes pagination and navigation buttons.

Code Example

HTML Structure

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg" alt="Hình 1"></div>
    <div class="swiper-slide"><img src="image2.jpg" alt="Hình 2"></div>
    <div class="swiper-slide"><img src="image3.jpg" alt="Hình 3"></div>
  </div>
  <!-- Phân trang -->
  <div class="swiper-pagination"></div>
  <!-- Nút điều hướng -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

Layout Styling with CSS

.swiper-container {
  width: 100%;
  height: 300px;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Initialize Swiper with JavaScript

const swiper = new Swiper('.swiper-container', {
  loop: true, // Bật vòng lặp
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
});

Explanation

  • Looping : Automatically returns to the first slide after the last.
  • Pagination and navigation buttons : Improve usability.
  • Autoplay : Slides change automatically at fixed intervals.

2. Swipe-Based Page Navigation (Pure JavaScript)

Overview

This example demonstrates a simple page navigation feature using swipe gestures. Swiping left or right moves to the next or previous page.

Code Example

HTML Structure

<div id="swipeArea">
  <p>Vuốt để chuyển trang</p>
</div>

Configure Swipe Handling with JavaScript

let startX = 0;
let endX = 0;

// Ghi lại vị trí bắt đầu
document.getElementById('swipeArea').addEventListener('touchstart', function (e) {
  startX = e.touches[0].clientX;
});

// Phát hiện hướng vuốt khi chạm kết thúc
document.getElementById('swipeArea').addEventListener('touchend', function (e) {
  endX = e.changedTouches[0].clientX;

  if (endX - startX > 50) {
    window.location.href = 'previous.html'; // Vuốt phải → trang trước
  } else if (startX - endX > 50) {
    window.location.href = 'next.html'; // Vuốt trái → trang tiếp theo
  }
});

Explanation

  • Coordinate tracking : Compares touch start and end positions.
  • Threshold (50px) : Prevents accidental detection.
  • Page navigation : Redirects based on swipe direction.

3. Creating a Carousel Menu (Using TouchSwipe)

Overview

This example shows how to build a carousel-style menu commonly used for product listings or news items using TouchSwipe.

Code Example

HTML Structure

<div id="carousel">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Styling with CSS

#carousel {
  display: flex;
  overflow: hidden;
  width: 300px;
}

.item {
  min-width: 300px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #ddd;
}

Cấu hình hành vi vuốt bằng JavaScript

$(function () {
  let position = 0;
  const itemWidth = 300;

  $('#carousel').swipe({
    swipeLeft: function () {
      position -= itemWidth;
      $('#carousel').css('transform', 'translateX(' + position + 'px)');
    },
    swipeRight: function () {
      position += itemWidth;
      $('#carousel').css('transform', 'translateX(' + position + 'px)');
    },
    threshold: 50,
  });
});

Giải thích

  • Cập nhật vị trí : Di chuyển carousel dựa trên hướng vuốt.
  • Khoảng cách vuốt tối thiểu : Ngăn chặn di chuyển vô tình.
  • Triển khai nhẹ : Xử lý hiệu quả bằng TouchSwipe.

Tóm tắt

Trong phần này, chúng tôi đã giới thiệu các ví dụ thực tế về chức năng vuốt có thể áp dụng vào các dự án thực tế.

  • Trình chiếu ảnh sử dụng Swiper.js
  • Điều hướng trang dựa trên vuốt bằng JavaScript thuần
  • Menu carousel được xây dựng bằng TouchSwipe

Những ví dụ này có thể được điều chỉnh cho nhiều trường hợp sử dụng.

7. Tóm tắt và các bước tiếp theo

Trong bài viết này, chúng tôi đã hệ thống hoá mọi thứ từ cơ bản đến kỹ thuật nâng cao để triển khai chức năng vuốt bằng JavaScript. Hãy tóm tắt các điểm chính và thảo luận về những gì bạn có thể khám phá tiếp theo.

Những điểm quan trọng

1. Tầm quan trọng và các khái niệm cốt lõi của cử chỉ vuốt

  • Cử chỉ vuốt cho phép tương tác trực quan trên các thiết bị cảm ứng như điện thoại thông minh và máy tính bảng.
  • Chúng được sử dụng rộng rãi trong các trường hợp như thư viện ảnh và carousel để cải thiện trải nghiệm người dùng.

2. Triển khai cử chỉ vuốt bằng JavaScript thuần

  • Chúng tôi đã triển khai phát hiện vuốt cơ bản và xử lý hướng bằng các sự kiện cảm ứng (touchstart, touchmove, touchend).
  • Bằng cách giới thiệu ngưỡng khoảng cách tối thiểu và ngăn ngừa phát hiện sai, chúng tôi đã xây dựng các tương tác vuốt thân thiện với người dùng.

3. Cải thiện hiệu suất với các thư viện

  • Sử dụng Swiper.js, chúng tôi dễ dàng triển khai các trình chiếu và carousel đáp ứng, đầy tính năng.
  • Với TouchSwipe, chúng tôi đã minh họa việc phát hiện vuốt nhẹ và đơn giản, phù hợp cho các dự án nhỏ.

4. Khắc phục sự cố và các thực tiễn tốt nhất

  • Chúng tôi đã trình bày các giải pháp cụ thể cho các vấn đề phổ biến như phát hiện sai, hành vi đáp ứng và tối ưu hiệu suất.
  • Chúng tôi cũng giới thiệu các kỹ thuật để cải thiện khả năng bảo trì thông qua cấu trúc mã tốt hơn và khả năng tái sử dụng.

5. Các ví dụ thực tế và ứng dụng thực tiễn

  • Chúng tôi đã minh họa các triển khai thực tế bao gồm trình chiếu, carousel và điều hướng trang dựa trên vuốt.
  • Mỗi ví dụ cho thấy cách mã có thể được tùy chỉnh để đáp ứng các yêu cầu dự án khác nhau.

Các bước tiếp theo: Khám phá các trường hợp sử dụng nâng cao

Dựa trên những gì bạn đã học được, dưới đây là một số ý tưởng để nâng cao chức năng vuốt hơn nữa.

1. Phát triển các tương tác cử chỉ nâng cao

  • Hỗ trợ nhiều cử chỉ : Thêm các tương tác pinch, zoom hoặc double‑tap.
  • Hoạt ảnh nâng cao : Kết hợp hành động vuốt với fade‑in, scaling hoặc các hiệu ứng hình ảnh khác.

2. Tích hợp với các framework

  • Tích hợp React hoặc Vue.js : Áp dụng thiết kế dựa trên thành phần bằng cách kết hợp logic vuốt với các framework frontend hiện đại.
  • Phát triển ứng dụng di động : Sử dụng chức năng vuốt trong các ứng dụng đa nền tảng được xây dựng bằng Ionic hoặc React Native.

3. Cải thiện tính khả dụng và khả năng truy cập

  • Cung cấp các phương pháp tương tác thay thế như nút bấm hoặc điều khiển bằng bàn phím bên cạnh các cử chỉ vuốt.
  • Thêm các gợi ý trực quan qua thiết kế chuyển động và chuyển đổi để hướng dẫn người dùng.

4. Cải thiện hiệu suất liên tục

  • Giám sát hiệu suất sau khi triển khai để ngăn ngừa các listener không cần thiết hoặc rò rỉ bộ nhớ.
  • Lặp lại các cải tiến UI/UX dựa trên phản hồi thực tế của người dùng.

Lời nhắn tới độc giả

Swipe functionality là một yếu tố thiết yếu của thiết kế web hiện đại và phát triển ứng dụng. Sử dụng các ví dụ mã và thư viện được giới thiệu trong bài viết này để xây dựng các tương tác vuốt phù hợp nhất với dự án của bạn.

Tất cả các mẫu mã có thể được tùy chỉnh tự do, vì vậy hãy thoải mái mở rộng chúng với ý tưởng của bạn để tạo ra giao diện người dùng tiên tiến và tinh tế hơn.

広告