vue中使用better-scroll实现滑动效果-阿里云开发者社区

开发者社区> 开发与运维> 正文

vue中使用better-scroll实现滑动效果

简介: 一、首先需要在项目中引入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.体验像原生:滚动非常流畅,而且没有滚动条。

一、首先需要在项目中引入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解决了这个问题。

三、下面是在项目中的使用

先给大家介绍最终要实现的效果

        就是移动端很常见的效果,当滑动右边部分的时候,左边会联动显示与当前内容相符合的标题高亮,当点击左边某一个标题的时候,右边会自动滑动到相应的内容。

img_15a17c87ecc9fbc462025495a722c464.png

实现及说明

1.滚动效果

better-scroll在使用的时候需要在dom元素渲染完成之后初始化better-scroll的实例,初始化的时候,先要获取需要滑动的元素,然后在初始化的时候将获取到的元素传递给初始化函数,此时便可实现滑动效果

2.左右联动效果

左右联动效果的实现,是better-scroll通过监听事件实现的。

首先获取到右边内容盒子的高度,然后获取到该盒子中每一项的高度并做前n项高度累加(第n项的高度是前n项的高度和)存储到listHeight数组中。在初始化的时候传递属性probeType=3 (探针的效果,时时获取滚动高度),并给右边的内容盒子对象监听scroll事件,从而时时获取Y轴位置,来与listHeight数组中的数据做比较,时时计算当前的索引值,并给对边对应索引值的项添加背景色高亮,从而实现右边滑动,联动左边。

当点击左边的每一项的时候,获取到当前的索引值,并根据当前的索引值获取到与右边内容盒子中对应索引的元素,右边的盒子元素通过监听scrollToElement,并传递获取到的对应索引元素和动画时间,从而实现点击左边,实现右边联动;

实现代码如下:

html结构

img_40f0e3d146c68c5e7ce6e6da801d3639.png

demo中用到的数据结构

img_539b4a23af780b54469b898e2037793c.png

demo中用到的方法

img_5e1d4ffa2ca7815678bf600509ea25d9.png

方法的调用

img_fca4b77ac814e4c81d9d6c0804529544.png

属性计算

img_ae2927c1fa3f5b27d93b23e2cba0fec6.png

样式不做过多介绍

需要注意的是,该页面的这一部分给了固定的高度,且超出部分overflow:hidden;


img_012ccd2ee26b9967da0b0ec82e602573.png

3.better-scroll实现水平滑动效果

项目中经常会遇到需要水平滑动的需求,现在就用better-scroll来实现它

better-scroll的使用方式跟上边的说明是一样,只是配置项发生了变化,下面将代码贴出来,就明了了。

template部分

img_e4db5158a4b95230060b9a2d58f51044.png

js部分

img_0d6acd3fe9bed3f3cd15c438e16924d9.png

css部分

img_4882ada9e5af5e8b2e96f4fef1a513d6.png

注意事项:

1.tab_content是内容的盒子,他的长度就是内容的宽度;

2.由于内容的盒子是需要滑动的,所以在内容盒子的外边还需要在加一层盒子,宽度为100%。

better-scroll插件git地址https://github.com/ustbhuangyi/better-scroll

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章