perfect-scrollbar在vue中的使用
1.下载perfect-scrollbar依赖包
npm install perfect-scrollbar
2.perfect-scrollbar特性
1)直接下载依赖包及包含css样式和js

2)然后去查看package.json中是否有此目录,有=》OK ,没有需要添加 ,方便管理依赖避免丢失

3.perfect-scrollbar的使用
1)引入

2)html中包裹所滑动的元素

3)设置img-scrollbox的样式 =》出现传统滚动条
说明:样式按自己需求自己调

4)计算高度方法

5)watch中和mounted中清楚缓存
说明:
1.如果是点击切换页面只需在mounted清除即可
2.如果点击只切换内容则在watch中监听数据变化清除和mounted中初始化清除


4.结果

本章到此结束,如有问题请各位大佬多多指教!!
perfect-scrollbar在vue中的使用的更多相关文章
- vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
- Vue中使用Sass全局变量
前言 假设我们原有项目的主题色是蓝色的,这时有个需求,需要把主题色改成橙色的.一般情况下,我们可能会在main.js中引入公共样式文件,但你会发现,在组件中使用公共样式文件中定义的某个参数时,会报一个 ...
- Perfect Scrollbar – 完美的 jQuery 滚动条插件
Perfect Scrollbar 是一个很小的,但完美的 jQuery 滚动插件.滚动条不会影响原来的设计布局,滚动条的设计是完全可定制的.你可以改变几乎所有的 CSS 样式的滚动条,滚动条设计对脚 ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar
可能大家厌倦了千篇一律的页面滚动条,如果你希望能够设计出与众不同的页面UI设计的话,Perfect ScrollBar可能就是你寻找的解决方案. 这个滚动条来自于一个个人项目,一个简单但是非常棒的滚动 ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- vue中watched属性
watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...
随机推荐
- Java 容器 & 泛型:六、容器讲到为什么要使用泛型
Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket ArrayList是集合类中无处不在的,泛型也是,泛型对集合类尤其有用.但是为啥要使用泛型?理解好了这 ...
- 聊聊Flexbox布局中的flex的演算法
到目前为止,Flexbox布局应该是目前最流行的布局方式之一了.而Flexbox布局的最大特性就是让Flex项目可伸缩,也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Fle ...
- TensorFlow和深度学习-无需博士学位(TensorFlow and deep learning without a PhD)
1. 概述 原文地址: TensorFlow and deep learning,without a PhD Learn TensorFlow and deep learning, without a ...
- OpenResty api网关设计
本文讲述 OpenResty api网关设计,主要涉及api网关介绍.openresty api网关 请求路由(路由判断.路由重写.服务判断.限流).授权验证(统一认证).动态Upstream 以及这 ...
- Linux上安装nginx+tomcat负载均衡
1.Ngnix Nginx (发音同 engine x)是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行. 其特点是占有内 ...
- 【动画】看动画轻松理解「Trie树」
Trie树 Trie这个名字取自“retrieval”,检索,因为Trie可以只用一个前缀便可以在一部字典中找到想要的单词. 虽然发音与「Tree」一致,但为了将这种 字典树 与 普通二叉树 以示区别 ...
- WebAPI参数传值string转bool,int转bool相关问题
今天在公司同事问了我一个问题,用postman传递json字符串给接口,接口获取到的值不正确. 我就看到下面的json数据: { "Mark":"1" } 接口 ...
- OKR20180607
OKR---目标与关键成果法 一套明确和跟踪目标及其完成情况的管理工具和方法 OKR的主要目标是明确公司和团队的“目标”以及每个目标达成的可衡量的“关键结果”. “目标”是设定一个定性的时间目标.“关 ...
- stringMVC_09文件批量上传
一.思路 在文件上传的基础上引入数组可以实现批量上传,只需要更改一下前段页面和controller类即可 文件上传: https://www.cnblogs.com/aihuadung/p/10167 ...
- Centos6.5安装MySQL5.6备忘记录
Centos6.5安装MySQL5.6 1. 查看系统状态 [root@itzhouq32 tools]# cat /etc/issue CentOS release 6.5 (Final) Kern ...