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 encodeURI和encodeURIComponent的比较
Apr 03 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
js格式化时间的简单实例
Nov 27 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
layui表格实现代码
May 20 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php中的观察者模式简单实例
2015/01/20 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
Angularjs基础知识及示例汇总
2015/01/22 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
Python Trie树实现字典排序
2014/03/28 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
浅析Python中的多条件排序实现
2016/06/07 Python
Python实现的弹球小游戏示例
2017/08/01 Python
Python实现简易Web爬虫详解
2018/01/03 Python
python 画函数曲线示例
2019/12/04 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
介绍下Lucene建立索引的过程
2016/03/02 面试题
制冷与电控专业应届生求职信
2013/11/11 职场文书
如何填写个人简历自我评价
2013/12/10 职场文书
教师考核材料
2014/05/21 职场文书
教师党员自我评价范文
2015/03/04 职场文书
python requests模块的使用示例
2021/04/07 Python
Python 正则模块详情
2021/11/02 Python