首先，我们需要在项目中引入更好的滚动

1.直接在package.json中写' better-scroll' :' 1.11.1 '版本，以github(目前最新版本)为准

2.cpnm install可以检查版本是否安装在node_modules中

3.直接在组件中从' better-scroll '编写导入b scroll

二、上卷的优点

1.原生体验：滚动非常流畅，没有滚动条。

2.固定滚动位置：当页面在vue中按路线切换时，组件会自动滚动到顶部，因此需要监控滚动行为来固定滚动位置。better-scroll解决了这个问题。

第三，以下是在项目中的使用

首先，我将向您介绍最终效果

这在移动端是非常常见的效果。滑动右侧部分时，左侧会突出显示当前内容对应的标题，单击左侧的标题时，右侧会自动滑动到对应的内容。

实施和解释

1.滚动效果

使用better-scroll时，需要在dom元素渲染完成后初始化better-scroll的实例。初始化时应先获取要滑动的元素，然后初始化时将获取的元素传递给初始化函数，此时即可实现滑动效果

2.左右联动效果

左右联动效果的实现是通过监控事件进行更好的滚动来实现的。

首先，获取右侧内容框的高度，然后获取框中每个项目的高度，并累加前n个项目的高度(第n个项目的高度是前n个项目的高度之和)，并将其存储在listHeight数组中。初始化时，传递属性probeType=3(探测效果，始终获取滚动高度)，并针对右侧内容框对象监听滚动事件，从而不时获取y轴位置，并与listHeight数组中的数据进行比较，不时计算出当前索引值，并为对侧索引值对应的项目添加背景色高亮，实现右滑与左联动。

当点击左侧的每一项时，获取当前索引值，并根据当前索引值获取右侧内容框中索引对应的元素。通过scrollToElement对右边的框元素进行监控，并将得到的对应索引元素和动画时间进行传输，从而实现点击左边，实现右边联动；

实现代码如下：

Html结构

演示中使用的数据结构

演示中使用的方法

方法的调用

属性计算

不要过多介绍风格

需要注意的是，这部分页面给出了固定的高度并超过了溢出：隐藏；

3 .更好-滚动实现水平滑动效果

在项目中经常需要水平滑动，所以我们现在应该使用更好的滚动来实现它

Better-scroll的使用方式与上面的描述相同，只是配置项发生了变化。请将下面的代码粘贴清楚。

模板部分

Js部分

Css部分

注意事项：

1.tab_content为内容框，其长度为内容的宽度；

2.因为内容框需要滑动，所以需要在内容框外增加一层宽度为100%的框。

更好滚动插件git地址https://github.com/ustbhuangyi/better-scroll

摘要

以上是边肖介绍的vue中的滑动效果和注意事项。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！