better-srcoll用法

一、better-srcoll官方介绍

  官网网址：http://ustbhuangyi.github.io/better-scroll       

better-scroll 是什么

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。

二、better-scroll安装（官方网站）

NPM

better-scroll 托管在 Npm 上，执行如下命令安装：

npm install better-scroll --save

接下来就可以在代码中引入了，webpack 等构建工具都支持从 node_modules 里引入代码：

import BScroll from 'better-scroll'

如果是 ES5 的语法，如下：

var BScroll = require('better-scroll')

script 加载

better-scroll 也支持直接用 script 加载的方式，加载后会在 window 上挂载一个 BScroll 的对象。

你可以直接用：https://unpkg.com/better-scroll/dist/bscroll.min.js 这个地址。也可以把 dist 目录下的文件拷贝出去发布到自己的 cdn 服务器。

三、用法

得有两个元素标签嵌套

　　


　　　　


　　　　　　在这个里面我们来写东西
           这里面可以用多个同级元素标签

　　　　

　　

不能,这两个嵌套的元素标签不能有同级的其他标签

    //错误示范
　　


　　　　


　　　　
       

       

　　

 就是wrapper用自己的固定高度，但content的高度超过wrapper的高度，就可以在wrapper里面滚动。

script加载

const bscroll=new BScroll(document.querySelector('.wrapper'))

直接引入js文件（script加载）的Demo

    
    
    



  

    

     //100个li
      
ss
    
  

 npm安装的使用

import BScroll from 'better-scroll'
this.scroll=new BScroll(this.$refs.wrapper,{

      })

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

1、初始化

//scroll=null
this.srcoll=new BScroll(el,{
        probeType: 3//滚动类型
        click: true,//支持元素点击
        pullUpLoad: true//开启上拉加载
      })
第一个参数el是固定的，也是是对应的wrapper，
第二个参数是{}可以有多个选项参数

对应的选项可以去官网查看

 

 

 2、事件用法

  

this.scroll.on('事件名称'，函数)

//获取滚动的位置
this.scroll.on('scroll',(position) => {
        // console.log(position);
      })

 其他事件查看官网 

 

3、方法

 

this.scroll.方法名

//当上拉加载数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载。
this.scroll.finishPullUp()

其他查看官网

 

四、示例 

 

 

五、注意

1、发生pullingUp事件后，要调用finishPullUp()方法，不然只会产生一次pullingUp上拉加载更多事件。

2、content区域的高度加载的时候就计算出来了。

    如果是异步请求数据的话，数据部分加载了，计算的content高度只能是部分的高度，导致滑动只能滑动到一半，

   所有要重新调用refresh()刷新Dom。最好异步请求后，调用refresh()