vue滚动条插件vue-happy-scroll

githb地址

使用的话

1.npm install vue-happy-scroll --save-dev;

2.注册

2.1全局注册

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

2.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 .使用代码段

需要注意的是: (1).item-body需要设置宽高,

(2).happy-scroll组件里面只能放一个dom结构,比如.item-container,.item-container里面放多少内容，都随便，最外层只有一个结构

  <div class="item-body"><happy-scroll color="rgba(51,51,51,0.2)" size="10" resize><div class="item-container">//你的内容</div></happy-scroll></div>

4. 使用效果

5.官网api中一些常用的配置属性

5.1.color(String):设置滚动条的颜色(ps：建议使用rgba，这样可以为滚动条设置透明度，当然，如果你需要设置透明度的话。)

5.2 size(Number|String):设置滚动条的大小。(ps：对于竖向滚动条表示宽度，横向滚动条表示高度)

5.3 min-length-h(Number)：设置横向滚动条最小的长度，当元素无限长或者宽的时候，会导致滚动条无限小，这种情况可以使用该属性。来设置最小的长度。（ps:也可以设置百分比来限制最小长度(可视区域 * min-length-h)。假设可视区域的宽度为300px，那么滚动条为60px。当min-length-h小于1的时候，会将其当作百分比来处理。）

5.4 min-length-v(Number):设置 竖向滚动条最小的长度，当元素无限长或者宽的时候，会导致滚动条无限小，这种情况可以使用该属性。来设置最小的长度。(ps:也可以设置百分比来限制最小长度(可视区域 * min-length-v)。假设可视区域的高度为200px，那么滚动条为40px。当min-length-h小于1的时候，会将其当作百分比来处理。)

5.5 scroll-top(Number|String):在组件mounted之后，设置容器距离顶部的距离。

5.6 scroll-left(Number|String):在组件mounted之后，设置容器距离左边的距离。

5.7 hide-vertical(Boolean):隐藏竖向滚动条

5.8 hide-horizontal(Boolean):隐藏横向滚动条(ps:如果你不需要横向出现滚动条，可以设置hide-horizontal来提高性能。)

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

vue滚动条插件vue-happy-scroll相关推荐

安装vue浏览器插件-Vue.js devtools
一.进入github仓库:https://github.com/vuejs/devtools 可以下载zip包,也可以clone仓库.这里我下载的压缩包. 二.解压后,在终端进入文件夹路径. 解压后推 ...
好用的vue组件插件及框架
实用的vue插件大汇总 Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总 ...
vue周边插件大全，收藏
Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...
vue 在浏览器控制台怎么调试谷歌插件vue Devtools
vue 在浏览器控制台怎么调试谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...
实用VUE 开发插件！！前端必备
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...
[vue] 怎么在vue中使用插件？
[vue] 怎么在vue中使用插件? npm 安装然后再main.js 引入最后 vue.use(插件名) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
VSCode 开发Vue必备插件
工欲善其事,必先利其器以下就是开发Vue必备插件: Vetur -- 语法高亮.智能感知.Emmet等包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选 ...
vue css load,vue css3loadding插件的开发以及npm包的发布管理
插件开发的话建议使用vue-gitment脚手架开发 vue init webpack-simple vue-gitment 如果提示执行cnpm install vue-cli -g 全局安装 c ...
vue 时间回显格式化_VSCode 开发Vue必备插件
1.Vetur -- 语法高亮.智能感知.Emmet等包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着) 2.EsLin ...

vue滚动条插件vue-happy-scroll

vue滚动条插件vue-happy-scroll相关推荐

最新文章

热门文章