Vue中使用iscroll 5

使用了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{/*这个样式将在双向滚动条显示的情况下被加载到容器元素上。通常情况下其中一个（横向或者纵向）是可见的*/

}