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

先上github地址。以及官方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的宽高，就会出现横向和纵向滚动条。

我的效果示例：

因为我的列表不够长，没有出现纵向滚动条，但是因为我的.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，目前正在寻找性能更高的办法，当然此插件的性能还是可以肯定的
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。说明监听竖向滚动条滚动到尾部的事件。

Vue的滚动条-vue-happy-scroll用法相关推荐

vue 返回滚动条顶部组件_vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域该方法可以接受一个布尔值作为参数.如果为true,表示元 ...
vue 2 滚动条加载更多数据实现
vue 2 滚动条加载更多数据实现解析: 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上 ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
前端框架Vue——vue-i18n ，vue项目中如何实现国际化，$t的用法
前端框架Vue--vue-i18n ,vue项目中如何实现国际化,$t的用法 vue中html页面写入$t('')怎么显示
vue性能优化-------vendor优化详细用法（瘦身），减小体积，引入cdn
vue性能优化-------vendor优化详细用法(瘦身),减小体积,引入cdn 原创ChrisWang_ 最后发布于2019-05-24 10:25:58 阅读数 1332 收藏展开 vue性 ...
Vue 3的provide和inject用法
了解Vue 3的provide和inject用法前言在组合式API中的用法基本用法前言 provide和inject在Vue 2中已经被广泛应用,不是新鲜API,3.0重新认识一下它们两个. ...
vue 设置滚动条的位置
vue 设置滚动条的位置场景:聊天的时候,消息会一条条的发送,但是呢,获取最新的数据只能手动滚动滚动条,那这个时候就想到微信聊天的时候,永远可以看到最后一条消息. 思路:获取div的高度(因为里面是 ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
vue中父子组件及 watch用法
父子组件及 watch vue中父子组件及 watch用法 - coder_zhang123456 - 博客园
vue 设置滚动条样式
vue 设置滚动条样式 //在index文件中/* @charset "utf-8"; */::-webkit-scrollbar {width: 5px;}/*定义滚动条轨道内 ...

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

Vue的滚动条-vue-happy-scroll用法相关推荐

最新文章

热门文章