Vue的滚动条-vue-happy-scroll用法

朱雀 2023-06-28 15:27 191阅读 0赞

先上[github地址][github]。以及[官方demo][demo]。  
官方说明很仔细，我就简述我的用法：

首先下载：npm install vue-happy-scroll --save-dev

然后注册，我用的是局部注册，在需要的页面中引入：

import { HappyScroll } from 'vue-happy-scroll'
    import 'vue-happy-scroll/docs/happy-scroll.css'

components: {
          'happy-scroll': HappyScroll
      },

然后在页面中应用：

<div class="offLineTable" style="width: 300px; height: 500px;">
        <happy-scroll color="rgba(6,6,13,0.3)" size="10" resize>
          <div class="cont">
           			//  你的dom结构，我这里放的是table
          </div>
        </happy-scroll>
    </div>

这里需要注意的是：  
1，这个happy-scroll组件外面的盒子.offLineTable要有高度和宽度，是滚动条出现的先决条件  
2，这个happy-scroll组件里面只能放一个dom结构比如.cont，至于你要给.cont里面写多少，写什么，随便，只要这个.cont的高度和宽度超出了最外层盒子.offLineTable的宽高，就会出现横向和纵向滚动条。

我的效果示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]  
因为我的列表不够长，没有出现纵向滚动条，但是因为我的.cont设置了宽度，所以出现了横向滚动条。

我的示例中，没有很多属性，只是用了：  
color：滚动条颜色  
size：滚动条粗细  
resize：就是字面意思

官方介绍中有诸多属性：  
**min-length-h** ：当元素无限长或者宽的时候，会导致滚动条无限小，这种情况可以使用该属性。来设置最小的长度。  
**min-length-v**：同上  
**scroll-top**：在组件mounted之后，设置容器距离顶部的距离。  
**scroll-left**：在组件mounted之后，设置容器距离左部的距离。  
**hide-vertical**：隐藏竖向滚动条  
**hide-horizontal**：隐藏横向滚动条  
**resize**：如果你的容器大小是变化的(高度或者宽度可能随时发生变化的情况)，可使用resize来开启对容器大小变化的监听，当容器的宽高大于你设定的宽高时，会自动出现滚动条，反正会自动隐藏滚动条。此功能当前版本依赖 [ element-resize-detector][element-resize-detector]，目前正在寻找性能更高的办法，当然此插件的性能还是可以肯定的  
**left**：表示设置竖向滚动条依靠在左边。默认竖向滚动条在右边。  
**top**： 表示设置横向滚动条依靠在上边。默认横向滚动条在下边

还有一些事件：  
**horizontal-start**：参数：`scrollLeft`。说明 监听横向滚动条滚动到头部的事件。当`scroll-left = 0`时会触发该事件。（在`horizontal-start`事件下，`scrollLeft`始终为0）  
**horizontal-end**：参数：`scrollLeft`。说明 监听横向滚动条滚动到尾部的事件。  
**vertical-start**：参数：`scrollTop`。说明 监听竖向滚动条滚动到头部的事件。当`scroll-top = 0`时会触发该事件。（在`vertical-start`事件下，`scrollTop`始终为0）  
**vertical-end**：参数：`scrollTop`。说明 监听竖向滚动条滚动到尾部的事件。

[github]: https://github.com/happy-js/vue-happy-scroll
[demo]: https://tangdaohai.github.io/vue-happy-scroll/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200109164540551.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[element-resize-detector]: https://github.com/wnr/element-resize-detector