[分享]一款基于vue2.0的滚动条插件

[分享]一款基于vue2.0的滚动条插件vue-happy-scroll是一款基于vue2.0的滚动条插件。 此插件致力解决原生滚动条在不同系统、不同浏览器中的丑陋表现,在保证原生滚动条功能可用的基础上实现了更丰富的功能、保证在所支持的浏览器下展现出风格一致、交互体验一致的滚动条。 它可以让你无需关心滚动条的兼容性问…

Downloads Version open issues closed issues License 欢迎PR

Chrome Firefox Safari Edge IE
9
10
11

当前版本不支持移动端(还未在移动端进行过测试)。The current version not support SP(I haven’t tested it on the smartphone yet).

Feature:

  • 保留原生滚动条功能
  • 支持动态设置滚动条颜色
  • 支持设置滚动条的位置。左右(竖向滚动条)、上下(横向滚动)方向
  • 支持隐藏滚动条
  • 支持动态设定滚动位置,并支持top与left值同步
  • 支持动态数据resize,滚动条自动隐藏与显示
  • 支持设置resize滚动条变化规则(e. 在chart应用中,来新消息时,滚动条始终在最底部)
  • 支持设置滚动速度
  • 支持设置隐藏滚动条,hover时显示

Demo 地址

tangdaohai.github.io/vue-happy-s…

vue-happy-scroll 是干嘛的

vue-happy-scroll是一款基于vue2.0的滚动条插件。

此插件致力解决原生滚动条在不同系统、不同浏览器中的丑陋表现,在保证原生滚动条功能可用的基础上实现了更丰富的功能、保证在所支持的浏览器下展现出风格一致、交互体验一致的滚动条。

它可以让你无需关心滚动条的兼容性问题,无需关心内容区域的宽高,当设定resize属性后,可以根据内容大小自动显示或隐藏滚动条。 这里有对各种丰富的额外功能进行说明。

版本迭代计划列表

github.com/tangdaohai/…

安装

  1. npm 推荐使用npm,这样可以跟随你的webpack配置去选择怎样打包。
npm i -D vue-happy-scroll
  1. CDN

    当前是使用的unpkg.com托管CDN,unpkg会自动与npm中版本保持同步。

    通过以下方式引入即可:

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

    可以访问unpkg.com/vue-happy-s… 来选择不同版本

注册组件

  1. 全局注册

    <template>
      <happy-scroll>
        <!-- 你的内容 -->
      </happy-scroll>
    </template>
    <script> import Vue from 'vue' import HappyScroll from 'vue-happy-scroll' // 引入css import 'vue-happy-scroll/docs/happy-scroll.css' Vue.use(HappyScroll) //或者 import { HappyScroll } from 'vue-happy-scroll' //自定义组件名 Vue.component('happy-scroll', HappyScroll) </script>
  2. 局部注册

    <template>
      <happy-scroll>
        <!-- 你的内容 -->
      </happy-scroll>
    </template>
    <script> import { HappyScroll } from 'vue-happy-scroll' // 引入css,推荐将css放入main入口中引入一次即可。 import 'vue-happy-scroll/docs/happy-scroll.css' export default { name: '', components: {HappyScroll} //在组件内注册 } </script>
  3. vue是全局变量时

    //如果vue是全局变量,happyScroll自动全局安装。
    if (typeof window !== 'undefined' && window.Vue) {
      Vue.component('happy-scroll', HappyScroll)
    }
    <html>
      <happy-scroll>
        <!-- 你的内容 -->
      </happy-scroll>
    </html>

属性

color

  • 类型String

  • 默认值rgba(51,51,51,0.2)

  • 用法:

    <happy-scroll color="rgba(51,51,51,0.2)">
      <!-- 你的内容 -->
    </happy-scroll>

    设置滚动条的颜色

    建议使用rgba,这样可以为滚动条设置透明度,当然,如果你需要设置透明度的话。

size

  • 类型Number|String

  • 默认值4

  • 用法:

      <happy-scroll size="8">
        <!-- 你的内容 -->
      </happy-scroll>

    设置滚动条的大小。

    对于竖向滚动条表示宽度,竖向滚动条表示高度

min-length-h (*new)

  • 类型NUmber

  • 默认值40

  • 单位px

  • 用法

    <happy-scroll :min-length-h="20">
      <!-- 你的内容 -->
    </happy-scroll>

    设置横向滚动条最小的长度,当元素无限长或者宽的时候,会导致滚动条无限小,这种情况可以使用该属性。来设置最小的长度。

    <happy-scroll :min-length-h="0.2">
      <!-- 你的内容 -->
    </happy-scroll>

    也可以设置百分比来限制最小长度(可视区域 * min-length-h)。假设可视区域的宽度为300px,那么滚动条为60px

    min-length-h小于1的时候,会将其当作百分比来处理。

min-length-v (*new)

  • 类型NUmber

  • 默认值40

  • 单位px

  • 用法

    <happy-scroll :min-length-v="20">
      <!-- 你的内容 -->
    </happy-scroll>

    设置竖向滚动条最小的长度,当元素无限长或者宽的时候,会导致滚动条无限小,这种情况可以使用该属性。来设置最小的长度。

    <happy-scroll :min-length-v="0.2">
      <!-- 你的内容 -->
    </happy-scroll>

    也可以设置百分比来限制最小长度(可视区域 * min-length-v)。假设可视区域的高度为200px,那么滚动条为40px

    min-length-h小于1的时候,会将其当作百分比来处理。

scroll-top

  • 类型Number|String

  • 默认值0

  • 修饰符sync

  • 用法:

    <happy-scroll scroll-top="20">
      <!-- 你的内容 -->
    </happy-scroll>
    <!-- 也可以增加 .sync 保持scroll-top同步 -->
    <happy-scroll scroll-top.sync="20">

    在组件mounted之后,设置容器距离顶部的距离。

    相当于element.scrollTop 一致。

    scroll-top的值会自动转换为数字,所以当值为固定的数字时(使用+转换的),你无需增加:(v-bind),直接写为scroll-top="20"即可。

scroll-left

  • 类型Number|String

  • 默认值0

  • 修饰符sync

  • 用法:

    <happy-scroll scroll-left="20">
      <!-- 你的内容 -->
    </happy-scroll>
    <!-- 也可以增加 .sync 保持scroll-left -->
    <happy-scroll scroll-top.left="20">

    在组件mounted之后,设置容器距离左边的距离。

    相当于element.scrollLeft 一致。

hide-vertical

  • 类型 Boolean

  • 默认值 false

  • 用法:

    <!-- 表示隐藏竖向滚动条 -->
    <happy-scroll hide-vertical>
      <!-- 你的内容 -->
    </happy-scroll>

    隐藏竖向滚动条

hide-horizontal

  • 类型 Boolean

  • 默认值 false

  • 用法:

    <!-- 表示隐藏横向滚动条 -->
    <happy-scroll hide-horizontal>
      <!-- 你的内容 -->
    </happy-scroll>

    隐藏横向滚动条

    如果你不需要横向出现滚动条,可以设置hide-horizontal来提高性能。

resize

  • 类型Boolean

  • 默认值false

  • 用法:

    <!-- 表示开启监听容器大小变化 -->
    <happy-scroll resize>
      <!-- 你的内容 -->
    </happy-scroll>

    如果你的容器大小是变化的(高度或者宽度可能随时发生变化的情况),可使用resize来开启对容器大小变化的监听,当容器宽高大于你设定的宽高时,会自动出现滚动条,反正会自动隐藏滚动条。

    此功能当前版本依赖 element-resize-detector,目前正在寻找性能更高的办法,当然此插件的性能还是可以肯定的

smaller-move-h、smaller-move-v

  • 类型String

  • 默认值''

  • 可选值:

    1. start
    2. end
    3. 1、2的值之外,其他所有值都认为是默认值
  • 用法:

    <happy-scroll smaller-move-v="start">
      <!-- 你的内容 -->
    </happy-scroll>

    resize=true时,此配置才有效。

    该属性表示当容器变小时,滚动条移动的方向。

    • smaller-move-h 内容变小时,横向滚动条移动的方向
    • smaller-move-v 内容变小时,竖向滚动条移动的方向

    当设置为start时,表示变小之后,滚动条会移动到头部(对竖向滚动条来说是最上边,对横向滚动条来说是最左边)

    当设置为end时,表示变小之后,滚动条会移动到尾部(对竖向滚动条来说是最下边,对横向滚动条来说是最右边)

    当设置为''(默认值)时,表示在变小时,滚动条的位置不发生变化。

bigger-move-h、bigger-move-v

  • 类型String

  • 默认值''

  • 可选值:

    1. start
    2. end
    3. 1、2的值之外,其他所有值都认为是默认值
  • 用法:

    <happy-scroll bigger-move-h="start">
      <!-- 你的内容 -->
    </happy-scroll>

    resize=true时,此配置才有效。

    该属性表示当容器大小变大时,滚动条移动的方向。

    属性值与smaller-move-h原理一致。

left

  • 类型Boolean

  • 默认值false

  • 用法:

    <happy-scroll left>
      <!-- 你的内容 -->
    </happy-scroll>

    表示设置竖向滚动条依靠在边。默认竖向滚动条在右边。

top

  • 类型Boolean

  • 默认值false

  • 用法:

    <happy-scroll top>
      <!-- 你的内容 -->
    </happy-scroll>

    表示设置横向滚动条依靠在边。默认横向滚动条在下边。v

throttle

  • 类型Number

  • 默认值14

  • 单位毫秒

  • 说明:

    设置鼠标拖动滚动条的节流时间,如果没有特殊的要求不建议修改此值。

事件

horizontal-start

  • 参数scrollLeft

    horizontal-start事件下,scrollLeft始终为0

  • 说明 监听横向滚动条滚动到头部的事件。当scroll-left = 0时会触发该事件。

    <happy-scroll @horizontal-start="yourHandler">
      <!-- 你的内容 -->
    </happy-scroll>

horizontal-end

  • 参数scrollLeft

  • 说明 监听横向滚动条滚动到尾部的事件。

    <happy-scroll @horizontal-end="yourHandler">
      <!-- 你的内容 -->
    </happy-scroll>

vertical-start

  • 参数scrollTop

    vertical-start事件下,scrollTop始终为0

  • 说明 监听竖向滚动条滚动到头部的事件。当scroll-top = 0时会触发该事件。

    <happy-scroll @vertical-start="yourHandler">
      <!-- 你的内容 -->
    </happy-scroll>

vertical-end

  • 参数scrollTop

  • 说明 监听竖向滚动条滚动到尾部的事件。

    <happy-scroll @vertical-end="yourHandler">
      <!-- 你的内容 -->
    </happy-scroll>

PR

期待并欢迎您的PR。 但请您一定要遵守standard代码风格规范。 并且您只需要提交src目录下的源码即可,无需提交build之后的代码

MIT

MIT

Copyright (c) 2017-present, 唐道海

今天的文章[分享]一款基于vue2.0的滚动条插件分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/21694.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注