vue实现h5左右滑动

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实现h5左右滑动相关的知识,希望对你有一定的参考价值。

参考技术A dom

js

vue中使用better-scroll实现滑动效果

1.安装:npm install better-scroll

2.引入:import BetterScrol from "better-scroll";

1.滚动效果

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

2.左右联动效果

左右联动效果的实现,是better-scroll通过监听事件实现的。

首先获取到右边内容盒子的高度,然后获取到该盒子中每一项的高度并做前n项高度累加(第n项的高度是前n项的高度和)存储到listHeight数组中。在初始化的时候传递属性probeType=3 (探针的效果,时时获取滚动高度),并给右边的内容盒子对象监听scroll事件,从而时时获取Y轴位置,来与listHeight数组中的数据做比较,时时计算当前的索引值,并给对边对应索引值的项添加背景色高亮,从而实现右边滑动,联动左边。

当点击左边的每一项的时候,获取到当前的索引值,并根据当前的索引值获取到与右边内容盒子中对应索引的元素,右边的盒子元素通过监听scrollToElement,并传递获取到的对应索引元素和动画时间,从而实现点击左边,实现右边联动;

链接:https://www.jianshu.com/p/f43fe49065a0
來源:简书

 

 



以上是关于vue实现h5左右滑动的主要内容,如果未能解决你的问题,请参考以下文章

h5页面上下左右滑动

为啥h5页面可以上下滑动,却不可以左右滑动

移动端触屏 也就H5页面 左右滑动 返回上一页?

H5页面切换,左右滑动和上下滑动,哪种好?

H5移动端禁止页面左右滑动

手机左右滑动屏幕切换页面是如何实现的