better-scroll之吸頂效果巨坑掙扎中

     今天和大家分享下better-scroll這款移動端用來解決各種滾動需求的插件（目前已經支持PC）

關於其中的API大家可以去官網看下  這裡就給大家介紹幾種常用的以及需要註意的點是什麼

首先說一下better-scroll的使用註意問題吧

     1、移動端 我們通常採用三段式進行佈局的  例如 <div class="container">    <header></header><main></main><fotter></fotter>   </div>  假如我們利用彈性盒佈局的話  給container  開盒子後我們一般給頭部和尾部固定的高度 給main這個中間盒子一個flex:1;和overflow:auto ，讓其達到可以自由滾動效果  但是如果我們給main這層中間盒子載入了better-scroll這款插件後 我們需要把auto改成hidden  畢竟給上固定高度百分百(當然這裡可以省略)

可是有的人就會發現有時滾動效果沒有作用對吧 嘿、此時第一個註意問題就來了 載入better-scroll的元素只能有一個直屬子元素 也就是 <main><div class="content">剩餘佈局盒子寫在這裡</div></main>這種形式 並且content這層盒子不能給固定高度  當content的高度大於外層main這個盒子後better-scroll就會生效

     2、然後第二點就是今天的重頭戲 吸頂效果了  

    相信用過這款插件的就會知道我們的滾輪在這裡是沒有作用的 這也意味著onscroll事件不能使用了 那吸頂效果該如何去做才好呢    在better-scroll中給我們提供了這樣一個方法  bs.on("scroll",function(e){})  此時的e能夠列印出一個關於滾動產生的x y 對象  註意這個方法要想生效我們需要在  這個bs對象中添加probeType這個屬性 寫法如下

 1  let bs = new BScroll("main", {
 2             pullUpLoad: true,//上拉
 3             pullDownRefresh: true,//下拉
 4             //也可以寫成對象模式
 5             //註意上拉不支持
 6             // pullDownRefresh:{
 7             //     //下拉到一百的位置才會觸發
 8             //     threshold:100,
 9             //     //然後鬆手後返回50的位置
10             //     stop:50,
11             // }
12         })
13 
14         bs.on("pullingDown", function () {
15             //"pullingUp   上拉"   
16             console.log("下拉刷新");
17             //這個事件開始告訴瀏覽器開始下拉刷新了
18             //然後進行一些數據的請求
19 
20             //當數據請求過來後
21             //告訴瀏覽器下拉結束
22             bs.finishPullUp();//上拉結束
23             bs.finishPullDown();
24             //DOM結構發生改變後可以刷新下
25             bs.refresh()
26         })

如果本文對你有所幫助的話 請動動您漂亮的手指點個贊嘍~~~