移動端 better scroll基礎

2022-07-11 00:57:14 字數 1118 閱讀 7439

better-scroll 是一款重點解決移動端(已支援 pc)各種滾動場景需求的外掛程式

#滾動原理

1. 與瀏覽器滾動原理一致,父容器高度固定,子元素內容撐開,必須產生滾動條,才能滾動。

1.載入外掛程式

2.html內容

... ...

3.初始化呼叫bscroll

#scrollx

型別:boolean

預設值: false

作用:當設定為 true 的時候,可以開啟橫向滾動。

#scrolly

型別:boolean

預設值:true

作用:當設定為 true 的時候,可以開啟縱向滾動

#probetype

型別: number

預設值:0

作用:1 滾動一段時間後在去派發scroll事件

2 只要滾動會實時的派發scroll事件

3 不僅在滾動實時的派發scroll事件,並且在滾動動畫的時候也會派發scroll事件

#bs.refresh()

重新計算 better-scroll,當 dom 結構發生變化的時候務必要呼叫確保滾動的效果正常

#bs.scrolltoelement(el, time, offsetx, offsety, easing)

引數:

el 滾動到的目標元素, 如果是字串,則內部會嘗試呼叫 queryselector 轉換成 dom 物件。

time 滾動動畫執行的時長(單位 ms)

offsetx 相對於目標元素的橫軸偏移量,如果設定為 true,則滾到目標元素的中心位置

offsety 相對於目標元素的縱軸偏移量,如果設定為 true,則滾到目標元素的中心位置

返回值:無

作用:滾動到指定的目標元素。

#bs.on();

bs.on("scroll",function())

移動端 移動端頁面適配方案

這是mdn上的解釋 這個單位代表根元素的 font size 大小 例如 元素的font size 當用在根元素的font size上面時 它代表了它的初始值 也就是說,rem單位取值的大小和根元素html的font size取值直接相關。它跟html元素之間得關係為 html的fontsize值 ...

pc端適配移動端

1.允許網頁寬度自動調整在網頁 的頭部,加入一行viewport元標籤所有主流瀏覽器都支援這個設定,包括ie9。對於那些老式瀏覽器 主要是ie6 7 8 需要使用css3 mediaqueries.js2.不使用絕對寬度由於網頁會根據螢幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬...

移動端布局

預設以寬度為640px的設計稿為基準頁面,然後通過js獲取當前顯示裝置的尺寸,對應的調整 html 標籤的font size大小,從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...