使用了mixin混入,用的时候注意
- iscroll会让滚动节点内的click失效,我选择转成使用tap事件(tap: true)。
- preventDefault设为false底部会出现空白,不知道什么原因,默认情况下preventDefault为true,会阻止滚动节点内事件冒泡。
- mounted钩子函数里面我使用定时器是因为我这个项目路由跳转会有个简单400ms左右的动画
//js
import IScroll from './iscroll'
export default{
methods:{
_initIScrollBar(){
if(typeof window.iscrollObj != 'undefined'){
window.iscrollObj.destroy();
window.iscrollObj = undefined;
let bar = document.querySelector('.iScrollVerticalScrollbar');
if(bar){
bar.parentNode.removeChild(bar)
}
}
window.iscrollObj = new IScroll('#router-wrap',{
scrollbars: 'custom',
fadeScrollbars: true,
interactiveScrollbars: true,
resizeScrollbars: false,
tap: true,
// click: true,
// preventDefault: false,
});
},
_refreshIScrollBar(){
setTimeout(() => {
if(window.iscrollObj && window.iscrollObj.refresh){
window.iscrollObj.refresh();
}
}, 20);
}
},
mounted(){
setTimeout(this._initIScrollBar,600);
//this.$nextTick(this._initIScrollBar);
},
updated(){
this.$nextTick(this._refreshIScrollBar);
}
}
/*css*/
/*滚动条*/
.iScrollHorizontalScrollbar{/*这个样式应用到横向滚动条的容器。这个元素实际上承载了滚动条指示器。*/
}
.iScrollVerticalScrollbar{/*和上面的样式类似,只不过适用于纵向滚动条容器。*/
position: absolute;
z-index: 9999;
width: 2px;
bottom: 2px;
top: 2px;
right: 0;
overflow: visible!important;
}
.iScrollIndicator{/*真正的滚动条指示器。*/
position: absolute;
width: 1.5rem;
height: 2.5rem;
background: rgba(0,0,0,0.4);
border-radius: 1rem;
margin-left: -1.5rem;
&::after{
content: '';
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAA1ElEQVR4nO3cQQ3DQBAEQUMwBEMMhDAI5MszQXBeq6ukQXD9suQ9DgAAAAAAAAAAAAAgaq31tlE7dz7+uZjmEkCbAOIEECeAOAHECSBOAHECiBNA3PYAXjZq+z4FAwAAAAAAAAAAAAAAzzbgRwj72+7HPxfTXAJoE0CcAOIEECeAOAHECSBOAHECiNsewN3n0e2uc/EAAAAAAAAAAAAAAMCzrQF3ccyNIH4uAbQJIE4AcQKIE0CcAOIEECeAOAHEbQ/gY6O2LwAAAAAAAAAAAAAAYJAvMueixadS3r0AAAAASUVORK5CYII=');
background-size: contain;
width: 0.8rem;
height: 0.8rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
.iScrollBothScrollbars{/*这个样式将在双向滚动条显示的情况下被加载到容器元素上。通常情况下其中一个(横向或者纵向)是可见的*/
}