better-scroll插件的简单使用

网友投稿 614 2022-05-30

better-scroll插件的简单使用

前言

下载安装

使用步骤

原理

实战

效果图

结束语

前言

因为better-scroll是一个注重移动端的滑动插件,并且better-scroll在vue.js开发项目中用的也十分的广泛,所以这次我们来讲解一下better-scroll在vue.js中的简单用法。

下载安装

可以直接npm工具下载,即在终端输入npm install better-scroll

也可以去github上下载

使用步骤

首先导入一下better-scroll

创建实例,并挂载到元素标签上去

设置一些事件监听,完成自己想要的功能

原理

其实就仅仅只需要前两个步骤,就可以完成better-scroll的滑动功能,是不是很简单呢?但无论如何我们都还要简单了解一下better-scroll的作用原理,这是我从官网拿来的一张图。

我来解释一下这幅图,意思就是首先我们需要一个容器,即图中的wrpper,确定我们滑动窗口的大小,其次在这个容器内部放一个content,也只能放一个content,其他杂乱的东西可以放在content内部,这个content高度不限,将我们的better-scroll实例挂在到wrpper上后,即可实现滑动。

实战

标签结构

文本内容1
文本内容2
文本内容3
文本内容4
文本内容5
文本内容6
文本内容7
文本内容8
文本内容9
文本内容10

1

2

3

4

better-scroll插件的简单使用

5

6

7

8

9

10

11

12

13

14

css简单样式

.wrapper{ height: 100px; /*最外层的wrapper高度必须设置,这决定了滑动窗口的大小*/ overflow: hidden; /*为了将多余内容隐藏,使滚动明显点*/ background: cyan /*背景设置一下颜色,让大家看的更清楚*/ }

1

2

3

4

5

better-scroll引用

//导入better-scroll import BScroll from 'better-scroll' //创建better-scroll实例并挂在到wrapper上 const bscroll = new BScroll('.wrapper', () => { //第二个参数是一个回调函数,用到复杂的功能要在这里配置,简单的滑动,这里不需要写任何东西 })

1

2

3

4

5

6

效果图

为了让大家更能理解better-scroll的原理,以及作用过程,我这里做了两张图,分别是给wrapper加了overflow: hidden样式以及没有加overflow: hidden样式的效果图.

加了overflow: hidden样式的效果图

未加overflow: hidden样式的效果图

想必这下大家对better-scroll有所了解了吧,这是个简单的使用,但却非常的实用,因为原生的js滑动会比较卡顿,所以有时需要可以用一下这个插件,还是不错的,而且一点都不难,就几个代码就可以实现,何乐而不为呢

结束语

当然了,想要better-scroll更多用法的可以去他的官网看官方文档,我这里只是向大家介绍一下初步使用,之后我还会继续更新better-scroll在项目开发中的一些用法以及遇到的一些bug解决方法,大家有兴趣的可以关注一下。

GitHub

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:流程图对比(jsplumb VS svgjs )
下一篇:创建型 --- 生成器模式
相关文章