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中的使用的更多相关文章

  1. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  2. Vue中使用Sass全局变量

    前言 假设我们原有项目的主题色是蓝色的,这时有个需求,需要把主题色改成橙色的.一般情况下,我们可能会在main.js中引入公共样式文件,但你会发现,在组件中使用公共样式文件中定义的某个参数时,会报一个 ...

  3. Perfect Scrollbar – 完美的 jQuery 滚动条插件

    Perfect Scrollbar 是一个很小的,但完美的 jQuery 滚动插件.滚动条不会影响原来的设计布局,滚动条的设计是完全可定制的.你可以改变几乎所有的 CSS 样式的滚动条,滚动条设计对脚 ...

  4. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  5. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. 超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar

    可能大家厌倦了千篇一律的页面滚动条,如果你希望能够设计出与众不同的页面UI设计的话,Perfect ScrollBar可能就是你寻找的解决方案. 这个滚动条来自于一个个人项目,一个简单但是非常棒的滚动 ...

  7. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  8. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  9. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  10. vue中watched属性

    watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...

随机推荐

  1. Java 容器 & 泛型:三、HashSet,TreeSet 和 LinkedHashSet比较

    Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket 上一篇总结了下ArrayList .LinkedList和Vector比较,今天泥瓦匠总结下Hash ...

  2. ftp服务器搭建及简单操作

    ftp服务器搭建及简单操作 1. 添加一个新用户,使用名useradd testftp,然后使用passwd testftp对新添加的用户设置密码(这里设置为“1234567”). 2. 安装ftp服 ...

  3. Hibernate学习(七)———— hibernate中查询方式详解

    序言 之前对hibernate中的查询总是搞混淆,不明白里面具体有哪些东西.就是因为缺少总结.在看这篇文章之前,你应该知道的是数据库的一些查询操作,多表查询等 --WH 一.hibernate中的5种 ...

  4. MySQL高可用之组复制(1):组复制技术简介

    MySQL组复制系列文章: MySQL组复制大纲 MySQL组复制(1):组复制技术简介 MySQL组复制(2):配置单主模型的组复制 MySQL组复制(3):配置多主模型的组复制 MySQL组复制( ...

  5. AngularJs_自定义注入对象_笔记1

    A-自定义控件示例: 我的自定义控件文件为:angular-seagull2-common.js (function (window, angular) { 'use strict'; $urlPro ...

  6. 结构型---外观模式(Facade Pattern)

    定义 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观定义了一个高层接口,让子系统更容易使用.使用外观模式时,我们创建了一个统一的类,用来包装子系统中一个或多个复杂的类,客户端可以直接通 ...

  7. Discuz网警过滤关键词库

    积累近几年discuz关键词过滤 使用方法:1.进入后台/内容/词语过滤批量添加.2.打开CensorWords.txt,复制里面的文本信息到批量添加的输入框内,点击确定即可.如图: 关键词下载:Ke ...

  8. springMVC_06数据的处理

    一.提交数据的处理 *springmvc是单例的 1. 提交的域名称和处理方法的参数一致即可 提交的数据 处理方法 2.如果域名城和参数名不一致,在方法内加上域名称eg.(RequestParam(“ ...

  9. 【Tomcat】上线部署tomcat。常用命令

    ps -ef | grep tomcat-web [查询tomact进程]kill -9 pid [结束tomcat进程]/opt/tomcat-web/bin/startup.sh [启动tomca ...

  10. 空间、域名与IP之间的关系?

    空间说白了就是服务器里面你可以使用的一个地方,在这里你可以放置数据和程序.最常用的就是放置您的网站程序和相关的所有文档和图片文件等等.这个放置你的网站文件的空间所在的服务器会有一个电信部门分配的固定编 ...