vue使用使用better-scroll实现滑动以及左右联动实现滑动以及左右联动
本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码，供大家参考，具体内容如下
一、首先需要在项目中引入一、首先需要在项目中引入better-scroll
1. 在package.json 直接写入 “better-scroll”:”^1.15.1″ 版本以github上为准（目前最新）
2.cpnm install 在node_modules 可以查看版本是否安装
3.直接在你的组件里面写入import BScroll from ‘better-scroll’;
二、二、better-scroll优点优点
1.体验像原生：滚动非常流畅，而且没有滚动条。
2.滚动位置固定：在vue中通过路由切换页面时组件会自动滚动到顶部，需要监听滚动行为才能让滚动位置固定，better-scroll
解决了这个问题。
三、下面是在项目中的使用三、下面是在项目中的使用
移动端很常见的效果，当滑动右边部分的时候，左边会联动显示与当前内容相符合的标题高亮，当点击左边某一个标题的时
候，右边会自动滑动到相应的内容。
项目如下图：
实现及说明实现及说明
1.滚动效果滚动效果
better-scroll在使用的时候需要在dom元素渲染完成之后初始化better-scroll的实例，初始化的时候，先要获取需要滑动的元
素，然后在初始化的时候将获取到的元素传递给初始化函数，此时便可实现滑动效果
2.左右联动效果左右联动效果
左右联动效果的实现，是better-scroll通过监听事件实现的。
首先获取到右边内容盒子的高度，然后获取到该盒子中每一项的高度并做前n项高度累加（第n项的高度是前n项的高度和）存
储到listHeight数组中。在初始化的时候传递属性probeType=3 （探针的效果，时时获取滚动高度），并给右边的内容盒子对
象监听scroll事件，从而时时获取Y轴位置，来与listHeight数组中的数据做比较，时时计算当前的索引值，并给对边对应索引
值的项添加背景色高亮，从而实现右边滑动，联动左边。
当点击左边的每一项的时候，获取到当前的索引值，并根据当前的索引值获取到与右边内容盒子中对应索引的元素，右边的盒
资源评论
weixin_38629042
- 粉丝: 7
- 资源: 927
最新资源
- 基于CNN的车牌号识别全部资料+详细文档+高分项目.zip
- 基于C++，使用BP神经网络识别手写字体全部资料+详细文档+高分项目.zip
- 基于CNN的验证码整体识别全部资料+详细文档+高分项目.zip
- 基于facenet的实时人脸识别系统全部资料+详细文档+高分项目.zip
- 基于dVector的说话人识别keras全部资料+详细文档+高分项目.zip
- 焊接预热和后热的理论基础及实际应用.pdf
- 焊接直边锥形壳体与筒体焊接结构工艺性试验.pdf
- 焊接质量对联箱水压泄漏的影响分析.pdf
- 焊接质量控制手册.pdf
- 焊接质量对搪玻璃设备搪烧工艺质量的影响分析.pdf
- 基于Google Tesseract-OCR 文字识别 仿小猿搜题、作业帮全部资料+详细文档+高分项目.zip
- 焊接质量控制系统.pdf
- 焊接质量与焊条使用.pdf
- 基于FPGA进行车牌识别全部资料+详细文档+高分项目.zip
- 合成氨一段炉旧管焊接.pdf
- 基于Java实现CNN，并附MNIST和语音（MFCC特征）性别识别示例。全部资料+详细文档+高分项目.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
