vue2移动端横向滚动如何实现

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 结构

2. 使用 CSS3 的 transform 属性

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

使用方法：

1）在模板中写 HTML 结构

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 插件的效果平滑。而且要注意适配不同尺寸的屏幕，以及处理手指滑动事件的问题