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 相关文章推荐
jquery offset函数应用实例
Nov 14 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
js实现弹窗效果
Aug 09 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分页示例代码
2007/03/19 PHP
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
Javascript - HTML的request类
2006/07/15 Javascript
[对联广告] JS脚本类
2006/08/27 Javascript
javascript第一课
2007/02/27 Javascript
用JS剩余字数计算的代码
2008/07/03 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
js module大战
2019/04/19 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
高中生学习生活的自我评价
2013/11/27 职场文书
大学军训通讯稿
2014/01/13 职场文书
财务部经理岗位职责
2014/02/03 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
2015年财务经理工作总结
2015/05/13 职场文书