专栏首页web开发VUE滚动条插件——vue-happy-scroll
原创

VUE滚动条插件——vue-happy-scroll

最近自己在自学vue2.0,然后就自己摸索做一个简单的后台管理系统,在做的过程中,总感觉不同浏览器自带的滚动条样式不统一,也很难看,所以就在网上找一些使用vue的滚动条插件。最开始用的是Easy-scroll插件,可是在使用过程中,发现一个问题——由于在开发过程中,需要经常打开开发者选项进行调试,可是只要一开启这个选项,Easy-scroll插件就会出现debugger断点,在网上也一直没找到怎么取消debugger。后来就找到了今天要说的这款插件:vue-happy-scroll。

先张贴一张效果图:

说明:这里会出现横向滚动条,是因为默认是开启横向滚动条的,并且内容区域高度超出了外层盒子的宽度

下面介绍使用方法:

1、安装vue-happy-scroll

推荐使用npm安装,这样可以跟随你的webpack配置去选择怎样打包

npm install vue-happy-scroll --save-dev

当然,你也可以选择使用script标签的方式引入

<!-- 引入css,该链接始终为最新版的资源 -->
<link rel="stylesheet" href="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.css">
<!-- 引入vue -->
<!-- 引入组件,该链接始终为最新版的资源 -->
<script src="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.min.js"></script>

2、注册组件

在main.js文件中编写一下代码段:

import Vue from 'vue'
import { HappyScroll } from 'vue-happy-scroll'
//自定义组件名
Vue.component('happy-scroll', HappyScroll)
// 引入css
import 'vue-happy-scroll/docs/happy-scroll.css'

3、vue组件中使用

 在这里就以我的小项目为例,在dashboard.vue文件中写入如下代码,使用happy-scrool标签就可以使用滚动条了

<template>
  <div>
    <h3>仪表盘</h3>
   <!-- 外层盒子 -->
    <div style="height:200px;width:300px;background-color:#ccc;">
      <!-- 这里的标签名称要和main.js文件中定义的组件名称保持一致 -->
      <happy-scroll color="rgba(0,0,0,0.5)" size="5">
        <!-- 内层盒子——内容区 -->
        <div class="con">
          <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
          <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
          <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
          <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
          <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
          <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
          <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
          <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
          <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
          <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
        </div>
      </happy-scroll>
    </div>
  </div>
</template>

由于在这里,没有针对class为con的div标签单独设置宽度,所以默认宽度就是和外层盒子宽度一样,所以就不会出现横向滚动条了(当然如果当内部盒子宽度超出外层盒子,就会出现横向滚动条了),效果图如下:

4、常用属性说明

该插件可以配置常用的滚动条颜色、粗细、竖向滚动条是左还是右边显示、横向滚动条是上还是下边显示、滚动条是否开启监听容器大小变化等属性。

在这里我只写两个我可能最常用的属性:颜色、大小。

4.1、滚动条颜色:color属性

设置滚动条颜色的属性为color,直接在标签上添加即可,在上面代码中,我已经添加了color属性的值为半透明的黑色滚动条(rgba(0,0,0,0.5)),也可以使用颜色单词,

例如<happy-scroll color="red">

4.2、滚动条粗细:size属性

设置滚动条粗细尺寸的属性为size,直接在标签上添加即可,其中默认值是4,例如当我设置size="10"的时候,

<happy-scroll color="red" size="10">

4.3、是否开启监听容器大小变化:resize属性

开启监听容器大小变化的属性名为resize,直接在标签上添加即可,<happy-scrollcolor="red"size="10"resize> ,这样,当你因为点击页面操作时,如果内容区的宽高变化了,滚动条的长短也会相应的变化(happy-scroll标签内的第一层标签开始就是内容区,这里是class为con的div)

例如:假设点击页码某一个地方后,div.con的高度变成了2000px:

<happy-scroll color="red" size="5" resize>
    <div class="con" style="height:2000px;">

则滚动条效果为如图:

 还有其他更多属性,这里就不再一一介绍说明,需要了解更详细的内容,可以参考该插件的开发者的github地址:https://github.com/happy-js/vue-happy-scroll

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue项目使用AES做加密

    用户1174387
  • 前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的u...

    用户1174387
  • 移动端弹性布局方案lib-flexible实践

    2个月前,写过一篇文章《从网易与淘宝的font-size思考前端设计稿与工作流》总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易...

    用户1174387
  • NDK OpenGLES3.0 开发(八):坐标系统

    我们知道 OpenGL 坐标系中每个顶点的 x,y,z 坐标都应该在 -1.0 到 1.0 之间,超出这个坐标范围的顶点都将不可见。

    字节流动
  • Flutter开发:运行项目提示flutter packages get不成功的解决方法

    今天端午节,为了欢度佳节,就算再困也得起床发一篇博文,发完继续睡,顺便祝各路粉丝端午节快乐。

    三掌柜
  • 操作系统核心原理-2.一些基本概念

      从概念上讲,计算机的结构是总线型的:布置一根总线将各种硬件设备挂在总线(Bus)上。

    Edison Zhou
  • dubbo 和 zokeeper 是分别用来做什么的?他们的关系到底是怎么样的?

    之前在因公司产品项目做微服务拆分时使用了dubbo和zokeeper但感觉对他们的认知还是不太清楚。所以最近重新复习看了一下。用通俗的方式些事一下(如有错误请指...

    兜兜毛毛
  • 链表相交

    找到两个链表相交的起始节点,交点表示一个链表的结尾与另一个链表中的某个节点链接,形成Y形。如图所示:

    九州暮云
  • 人工智能与大数据开发的12个注意点

    人工智能是近年来科技发展的重要方向,在大数据时代,对数据采集、挖掘、应用的技术越来越受到瞩目。在人工智能和大数据的开发过程中,有哪些特别需要注意的要点人工智能领...

    小莹莹
  • 编译 | 人工智能与大数据开发的 12个注意点

    选自《智能Web算法》(第二版) 达观数据编译 ? 机器学习是人工智能研究领域的重要方向,在大数据时代里,对数据采集、挖掘、应用的技术越来越受到瞩目,并越来越...

    达观数据

扫码关注云+社区

领取腾讯云代金券