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 相关文章推荐
ie下动态加态js文件的方法
Sep 13 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
如何提高javascript加载速度
Dec 26 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 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 静态变量的初始化
2009/11/15 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
一分钟理解js闭包
2016/05/04 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
浅谈python标准库--functools.partial
2019/03/13 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
幼儿园老师辞职信
2014/01/20 职场文书
入党自我评价优缺点
2014/01/25 职场文书
教师岗位职责
2015/02/03 职场文书
教师求职简历自我评价
2015/03/10 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
小孩不笨观后感
2015/06/03 职场文书
护理工作心得体会
2016/01/22 职场文书
基于Python实现对比Exce的工具
2022/04/07 Python