这篇文章主要介绍了vue的滚动条插件实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
效果如下
代码如下
& lt; template>
& lt; div类=" vue-scroll " ref=皏ueScrollW”比;
& lt; div类=" vue-scroll-w " ref=皏ueScroll”比;
& lt; div类=皏ue-scroll-c”:在
& lt; slot> & lt;/slot>
& lt;/div>
& lt;/div>
& lt; div类=v=皏ue-scrollbar率& lt;1”比;
& lt; div类=" vue-scrollbar-thumb "
：
@mousedown=" onmousedown "
@mouseup=" onmouseup "
祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“vue-scroll”,
数据(){
返回{
经验:0,
上图:0,
速度:2
moveTop:空,
isDrag:假的,
连续波:10,
观察者:零
}
},
计算:{
thumbH () {
返回。拇指+“px”;
},
thumbTop () {
返回。+“px”;
},
cWidth () {
返回。连续波+“%”;
}
},
更新(){
如果(! window.MutationObserver) {
this.refresh ();
}
},
安装(){
var=我;
我。refs.vueScroll.addEventListener美元(“滚动”,me.onscroll.bind(我));
window.addEventListener (“mouseup me.onmouseup.bind(我));
window.addEventListener (“mousemove me.onmousemove.bind(我));
如果(window.MutationObserver) {//MutationObserver最低只兼容ie11
我。观察者=new window.MutationObserver (me.mutationCallback.bind(我));
me.observer.observe参(我。。vueScroll, {
属性:没错,
childList:没错,
子树:真
});
}
me.refresh ();
},
方法:{
mutationCallback (mutationsList) {
this.refresh ();
},
scoped>
.vue-scroll {
高度:100%;
宽度:100%;
溢出:隐藏;
位置:相对;
.vue-scroll-w {
宽度:1000%;
高度:100%;
溢出:汽车;
.vue-scroll-c {
位置:相对;
宽度:10%;
}
}
.vue-scrollbar {
位置:绝对的;
z - index: 1;
右:0;
上图:0;
宽度:4 px;
高度:100%;
背景:继续;
透明度:0.6;
.vue-scrollbar-thumb {
位置:绝对的;
上图:0;
右:0;
宽度:4 px;
border - radius: 4 px;
背景:# D3D3D3;
和:悬停{
背景:# bbb;
}
和:主动{
背景:# aaa级;
}
}
}
}
& lt;/style>
使用
& lt; template>
& lt; div类=肮龆北?
& lt; vueScroll>
& lt; ul>
& lt;李v=?0项”:关键=跋钅俊痹趝{项}}& lt;/li>
& lt;/ul>
& lt;/vueScroll>
& lt;/div>
& lt;/template>
& lt; script>
从“@/组件/导入vueScroll vue-scroll.vue”
出口默认{
数据(){
返回{
数:60
}
},
组件:{
vueScroll
},
安装(){
}
}
& lt;/script>
& lt;风格lang=吧佟眘coped>
.scroll {
宽度:400 px;
身高:600 px;
保证金:0汽车;
边界:1 px固体红;
ul {
李{
行高:30 px;
边界底部:1 px固体# ddd;
}
}
}
& lt;/style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
