Vue2 移动端横向滚动实现方法：better-scroll 和 CSS3 transform

Vue2 移动端横向滚动实现方法：better-scroll 和 CSS3 transform

在移动端开发中，横向滚动是一种常见的交互方式，例如轮播图、商品列表等。Vue2 提供了多种实现横向滚动的方法，本文将介绍两种常用的方案：使用 better-scroll 插件和利用 CSS3 的 transform 属性。

1. 使用 better-scroll 插件

better-scroll 是一个基于原生 JS 的插件，适用于移动端滚动场景。它能够实现平滑的滚动效果，并且支持横向滚动。

使用方法：

1）安装 better-scroll

npm install better-scroll --save

2）在组件中引入并创建实例

import BScroll from 'better-scroll'

...

mounted() {
  this.scroll = new BScroll(this.$refs.wrapper, {
    scrollX: true, // 开启横向滚动
    eventPassthrough: 'vertical' // 禁止纵向滚动
  })
}

3）在模板中写 HTML 结构

<div ref="wrapper">
  <div>
    <div class="item"></div>
    <div class="item"></div>
    ...
  </div>
</div>

2. 使用 CSS3 的 transform 属性

CSS3 的 transform 属性可以实现平滑的动画效果，也可以用来实现横向滚动。通过设置 translateX 属性来移动元素的位置。

使用方法：

1）在模板中写 HTML 结构

<div class="wrapper">
  <div class="list">
    <div class="item"></div>
    <div class="item"></div>
    ...
  </div>
</div>

2）使用 CSS3 的 transform 属性设置元素的位置

.wrapper {
  overflow: hidden;
  width: 100%;
}

.list {
  display: flex;
  transition: transform 0.3s ease-out;
}

.item {
  flex: 0 0 100px;
}

// JS 中设置元素的位置
this.$refs.list.style.transform = `translateX(-${this.offset}px)`;

其中，offset 是一个变量，表示待滚动的距离。

需要注意的是，这种方式实现的滚动效果不如 better-scroll 插件的效果平滑。而且要注意适配不同尺寸的屏幕，以及处理手指滑动事件的问题。

总结

better-scroll 和 CSS3 transform 都是实现移动端横向滚动的有效方法。better-scroll 插件提供了更完善的滚动体验，而 CSS3 transform 则更轻量级，更适合简单的滚动场景。开发者可以根据实际需求选择合适的方案。