better-scroll

原理

父容器固定高度，并overflow:hidden;使得子元素高度超出容器后被隐藏。

使用

import BScroll from 'better-scroll'
initScroll(){
  if(!this.musicList){
    this.musicList = new BScroll(this.$refs.musicList, {
     click:true
    })
  }else{
    this.musicList.refresh(); // 增减 刷新
  }

注意点

一

要在DOM渲染后才可以使用 vue渲染顺序： mounted watch created ;所以获取数据要用异步调用: this.$nextTick(()=>{this.initScroll})

二

BScroll

三

如图：父元素高度wrapperHeight为342 ,ul高度scrollerHeight为350 要满足条件 wrapperHeight < scrollerHeight 才能触发BScroll

四

如果 ul高度等于父元素高度((即：内容不满），还想要可以拉动，可以给ul设置一个min-height:350,就大于父元素了，两者之间的差就为maxScrollY;

五

横向的BScroll就设置

initScroll(){
  if(!this.musicList){
    this.musicList = new BScroll(this.$refs.musicList, {
     scrollX:true;
     eventPassthrough:'vertical'
    })
  }else{
    this.musicList.refresh(); // 增减 刷新
  }

六

event._constructed

pc端,点击事件会执行两次，
由于better-scroll派发的事件有event_constructed:true属性.
if(!event._constructed){
return ;
} //阻止非vue事件就会不会重复点击了