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代码
May 09 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 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
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
最短的IE判断代码
2011/03/13 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
2014年国培研修感言
2014/03/09 职场文书
先进集体申报材料
2014/12/25 职场文书
单位收入证明范本
2015/06/18 职场文书
老干部座谈会主持词
2015/07/03 职场文书
总经理聘用协议书
2015/09/21 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
详解Go语言中Get/Post请求测试
2022/06/01 Golang