移动端左右滑动：玩转flex布局搞定

2023-04-13 17:56:24

移动端左右滑动交互：使用 flex 布局的终极指南

随着移动端网站和应用程序的普及，用户在小屏幕上浏览信息的需求也在不断增长。为了提供更好的用户体验，设计师和开发人员需要掌握各种移动端交互技巧，其中，左右滑动效果就是一种非常受欢迎的设计元素。

在本指南中，我们将深入探讨如何使用 flex 布局实现移动端的左右滑动效果。flex 布局是一种灵活的布局方式，可轻松实现各种复杂的布局，包括左右滑动。

使用 flex 布局实现左右滑动效果

HTML 结构

首先，创建一个 HTML 文件，并添加以下代码：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="container"> 是容器元素，包含所有滑动项目。
<div class="item"> 是滑动项目，可根据需要添加任意数量。

CSS 样式

接下来，在<head>元素中添加以下 CSS 样式：

.container {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
}

.item {
  flex-basis: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
}

.container 容器设置为 flex 布局，flex-direction 为 row，滑动项目水平排列。
.item 滑动项目设置了宽度、高度和边距。

JavaScript 代码

最后，在<body>元素中添加以下 JavaScript 代码：

var container = document.querySelector('.container');

container.addEventListener('scroll', function() {
  var scrollLeft = container.scrollLeft;

  if (scrollLeft > 0) {
    container.classList.add('scrolling-left');
  } else {
    container.classList.remove('scrolling-left');
  }
});