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 相关文章推荐
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 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
PHP实现下载断点续传的方法
2014/11/12 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
php post换行的方法
2020/02/03 PHP
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
python实现的重启关机程序实例
2014/08/21 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
python读取图片任意范围区域
2019/01/23 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
python中的global关键字的使用方法
2019/08/20 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
写好自荐信的几个要点
2013/12/26 职场文书
安全生产检查通报
2014/01/29 职场文书
《钱学森》听课反思
2014/03/01 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
小学班主任评语
2014/12/29 职场文书
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python