歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
  1、移動端 我們通常采用三段式進行布局的? 例如
 
  可是有的人就會發現有時滾動效果沒有作用對吧 嘿、此時第一個注意問題就來了 加載better-scroll的元素只能有一個直屬子元素 也就是
 
  這種形式 并且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的使用
 
  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 })

如需轉載,請注明文章出處和來源網址:http://www.rs2pl.com/html/h62475.shtml

久久天天躁狠狠躁夜夜躁2020