vue中使用better-scroll实现滑动效果及注意事项


Posted in Javascript onNovember 15, 2018

一、首先需要在项目中引入better-scroll

1. 在package.json 直接写入 "better-scroll":"^1.11.1"  版本以github上为准(目前最新)

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

3.直接在你的组件里面写入import BScroll from 'better-scroll';

二、better-scroll优点

1.体验像原生:滚动非常流畅,而且没有滚动条。

2.滚动位置固定:在vue中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题。

三、下面是在项目中的使用

先给大家介绍最终要实现的效果

        就是移动端很常见的效果,当滑动右边部分的时候,左边会联动显示与当前内容相符合的标题高亮,当点击左边某一个标题的时候,右边会自动滑动到相应的内容。

vue中使用better-scroll实现滑动效果及注意事项

实现及说明

1.滚动效果

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

2.左右联动效果

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

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

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

实现代码如下:

html结构

vue中使用better-scroll实现滑动效果及注意事项

demo中用到的数据结构

vue中使用better-scroll实现滑动效果及注意事项

demo中用到的方法

vue中使用better-scroll实现滑动效果及注意事项

方法的调用

vue中使用better-scroll实现滑动效果及注意事项

属性计算

vue中使用better-scroll实现滑动效果及注意事项

样式不做过多介绍

需要注意的是,该页面的这一部分给了固定的高度,且超出部分overflow:hidden;

vue中使用better-scroll实现滑动效果及注意事项

3.better-scroll实现水平滑动效果

项目中经常会遇到需要水平滑动的需求,现在就用better-scroll来实现它

better-scroll的使用方式跟上边的说明是一样,只是配置项发生了变化,下面将代码贴出来,就明了了。

template部分

vue中使用better-scroll实现滑动效果及注意事项

js部分

vue中使用better-scroll实现滑动效果及注意事项

css部分

vue中使用better-scroll实现滑动效果及注意事项

注意事项:

1.tab_content是内容的盒子,他的长度就是内容的宽度;

2.由于内容的盒子是需要滑动的,所以在内容盒子的外边还需要在加一层盒子,宽度为100%。

better-scroll插件git地址https://github.com/ustbhuangyi/better-scroll

总结

以上所述是小编给大家介绍的vue中使用better-scroll实现滑动效果及注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
js实现导航吸顶效果
Feb 24 Javascript
几种响应式文字详解
May 19 Javascript
react-router中的属性详解
Jun 01 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 Javascript
layDate日期控件使用方法详解
Nov 15 #Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 #Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 #Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 #Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 #Javascript
vue 移动端适配方案详解
Nov 15 #Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 #Javascript
You might like
模仿OSO的论坛(四)
2006/10/09 PHP
php printf输出格式使用说明
2010/12/05 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
什么情况下可以不写PHP的闭合标签“?>”
2014/08/28 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
js的一些常用方法小结
2011/06/29 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
js有序数组的连接问题
2013/10/01 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
原生js实现轮播图
2017/02/27 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
javaScript实现滚动条事件详解
2020/03/24 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
python实现AdaBoost算法的示例
2020/10/03 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
国贸专业个人求职信分享
2013/12/04 职场文书
区三好学生主要事迹
2014/01/30 职场文书
团拜会策划方案
2014/06/07 职场文书
学校宣传标语
2014/06/18 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
Echarts如何重新渲染实例详解
2022/05/30 Javascript