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 ...
随机推荐
- Linux编程 24 shell编程(结构化 if [ condition ] 数值比较,字符串比较)
一.概述 接着上篇讲的结构化命令,最后讲到了test命令的另一种写法 if [ condition ],它的语法格式如下: --格式如下: if [ condition ] then commands ...
- JavaScript和Ajax部分(3)
21. 原生(native)Ajax使用实例 //创建XMLHttpRequest对象的方法 function createXmlHttpRequest(){ if(window.ActiveXObj ...
- shiro源码篇 - shiro的filter,你值得拥有
前言 开心一刻 已经报废了一年多的电脑,今天特么突然开机了,吓老子一跳,只见电脑管家缓缓地出来了,本次开机一共用时一年零六个月,打败了全国0%的电脑,电脑管家已经对您的电脑失去信心,然后它把自己卸载了 ...
- c++中的new、operator new、placement new
一.定义 1.new new是c++中的关键字,,其行为总是一致的.它先调用operator new分配内存,然后调用构造函数初始化那段内存. new 操作符的执行过程:1. 调用operator n ...
- 南大算法设计与分析课程复习笔记(4)L4 - QuickSort
一.快速排序 算法导论上关于快速排序有两种写法 第一种,从头到尾遍历,不断将小于基准元素的项移到前面.代码很简介,只需要维护一个交换位置,表示小于基准元素的末尾位置加一 我们看算法导论上的一个例子: ...
- C#泛型。
作用: 使用泛型可以实现算法重用. class Program { static void Main(string[] args) { MyClass<string> myClass = ...
- Transact-SQL解析和基本的实用语句
SQL语言 DDL(数据定义语句) DML(数据操作语句) DCL(数据控制语句) DDL 数据定义 操作对象 操作方式 创建 删除 修改 模式 CREATE SCHEMA DROP SCHEMA 表 ...
- Echarts图表legend的排版问题(转载)
来源:https://blog.csdn.net/david_jiahuan/article/details/80096922 案例一 项目中现有样式: 客户需求:将图例分为两列,并且上下两列的图例要 ...
- Java_HashMap使用思路
一.HashMap的应用思路 使用: Map,Set集合,String的split切割方法 ,增强for循环 使用思路:为所有key创建容器,之后容器中存放对应value 二.实现示例代码 1.两个 ...
- Eclipse中SVN插件的安装和配置(在线安装)
公司项目中用到了svn来管理项目,然后需要在Eclipse中进行配置.网上参考了很多资料,离线安装的方式装上了,但是导入项目后报错,可能是离线安装包的问题.然后又采用了Eclipse在线安装的方式,总 ...