vue使用better-scroll的注意事项

1：在vue脚手架中下载better-scroll 

npm install better-scroll --save

2：下载好之后在需要的页面的js添加

import Bscroll from 'better-scroll':

3：html的格式  需要有两个div包裹起来，有红色标注的是必需有的，里面的内容根据业务来写。

<div  ref="scrollBox" id="fileDownloadedBox">
      <div>
        <!--正在下载的单个文件信息-->
         <div>xxxxxx</div>
      </div>
    </div>

4：js部分

mounted() {
        this.scroll = new Bscroll(this.$refs.scrollBox)

        //当然你也可以这个写
 this.scroll = new Bscroll(document.getElementById('fileDownloadedBox'));
        
    },
   $refs是你需要在html中添加上
    <div  ref="scrollBox" >
      <div>
        <!--正在下载的单个文件信息-->
         <div>xxxxxx</div>
      </div>
    </div>

5:css部分

#fileDownloadedBox{
    position: absolute;
    overflow: hidden;
    left:0;
    right:0;
    top:0.95rem;
    bottom:0
}

6：这些只是基本配置，如果你想在better-scroll的内容增加点击事件那么需要添加这个代码

 mounted() {
        this.scroll = new Bscroll(this.$refs.fileScrollBox,{
            click:true//启动点击事件
        })
    },

当然还有很多事件 你就需要自己去官网看了。 https://www.npmjs.com/package/better-scroll

 

总的html+js+css抒写