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這個屬性 寫法如下

let bs=new BScroll("main",{

probeType:2

})

然后到了這里就有人會說那我們既然能夠得到y值那豈不是可以 利用以前的方法 我們給需要吸頂的元素添加一個關於固定定位的class類名就可以對吧   然后此時又引出了better-scroll的另一個巨坑了   

fixed定位的元素，如果父級有transform樣式，值不為none，那么fixed定位就會失效，scale(),rotate()都會使fixed定位失效。  所以說我們在使用better-scroll事件的盒子里會造成我們的絕對定位失效 從而導致我們的吸頂效果失敗     於是本人想出另外一個比較low的方法可以模擬吸頂效果   我們同樣可以在scroll這個方法中克隆一下這個需要吸頂的盒子然后 在通過e.y值在達到我們想要的高度時動態添加給除了main任何一個地方  注意這里一定不要加給main   然后在通過絕對定位定在想要位置  不想要的位置再刪除  這里刪除的時候需要判斷是否添加上   添加的時候注意不要多次添加！！！

 

  3、點擊事件失效問題  

　　在引用了這個插件后這個盒子內部的元素會出現點擊事件失效問題  此時我們需要在bs那個對象中放上這個屬性  click:true

 

  4、  返回頂部操作問題

　　

　　前面說過引入了這個插件后onscroll事件就不會被觸發了 那么代表scrollTop也就沒有作用了  那么返回頂部操作我們應該怎么辦呢 

　　此時better-scroll事件里面有一個方法 bs.scrollTop(0,0,1000) 這個方法可以讓我們返回頂部  0,0是返回0，0點位置 第三個參數是返回所用的時間長短

　　

  5、上拉加載效果 和 下拉刷新  

 這里給大家簡單介紹幾個API的使用

 

 let bs = new BScroll("main", {
            pullUpLoad: true,//上拉
            pullDownRefresh: true,//下拉
            //也可以寫成對象模式
            //注意上拉不支持
            // pullDownRefresh:{
            //     //下拉到一百的位置才會觸發
            //     threshold:100,
            //     //然后松手后返回50的位置
            //     stop:50,
            // }
        })

        bs.on("pullingDown", function () {
            //"pullingUp   上拉"   
            console.log("下拉刷新");
            //這個事件開始告訴瀏覽器開始下拉刷新了
            //然后進行一些數據的請求

            //當數據請求過來后
            //告訴瀏覽器下拉結束
            bs.finishPullUp();//上拉結束
            bs.finishPullDown();
            //DOM結構發生改變后可以刷新下
            bs.refresh()
        })

 

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