国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 編程 > JavaScript > 正文

vue使用 better-scroll的參數(shù)和方法詳解

2019-11-19 14:28:51
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

格式:var obj = new BScroll(object,{[option1,],.,.});

注意:

1、要確保object元素的高度比其父元素高
2、使用時(shí),一定要確保object所在的dom渲染后,再用上面的語(yǔ)句,或者obj.refresh()

Options 參數(shù)

  1. startX: 0 開(kāi)始的X軸位置
  2. startY: 0 開(kāi)始的Y軸位置
  3. scrollY: true 滾動(dòng)方向?yàn)?Y 軸
  4. scrollX: true 滾動(dòng)方向?yàn)?X 軸
  5. click: true 是否派發(fā)click事件,通常判斷瀏覽器派發(fā)的click還是betterscroll派發(fā)的click,可以用event._constructed,若是bs派發(fā)的則為true
  6. directionLockThreshold: 5
  7. momentum: true 當(dāng)快速滑動(dòng)時(shí)是否開(kāi)啟滑動(dòng)慣性
  8. bounce: true 是否啟用回彈動(dòng)畫(huà)效果
  9. selectedIndex: 0 wheel 為 true 時(shí)有效,表示被選中的 wheel 索引
  10. rotate: 25 wheel 為 true 時(shí)有效,表示被選中的 wheel 每一層的旋轉(zhuǎn)角度
  11. wheel: false 該屬性是給 picker 組件使用的,普通的列表滾動(dòng)不需要配置
  12. snap: false 該屬性是給 slider 組件使用的,普通的列表滾動(dòng)不需要配置
  13. snapLoop: false 是否可以無(wú)縫循環(huán)輪播
  14. snapThreshold: 0.1 用手指滑動(dòng)時(shí)頁(yè)面可切換的閾值,大于這個(gè)閾值可以滑動(dòng)的下一頁(yè)
  15. snapSpeed: 400, 輪播圖切換的動(dòng)畫(huà)時(shí)間
  16. swipeTime: 2500 swipe 持續(xù)時(shí)間
  17. bounceTime: 700 彈力動(dòng)畫(huà)持續(xù)的毫秒數(shù)
  18. adjustTime: 400 wheel 為 true 有用,調(diào)整停留位置的時(shí)間
  19. swipeBounceTime: 1200 swipe 回彈 時(shí)間
  20. deceleration: 0.001 滾動(dòng)動(dòng)量減速越大越快,建議不大于0.01
  21. momentumLimitTime: 300 符合慣性拖動(dòng)的最大時(shí)間
  22. momentumLimitDistance: 15 符合慣性拖動(dòng)的最小拖動(dòng)距離
  23. resizePolling: 60 重新調(diào)整窗口大小時(shí),重新計(jì)算better-scroll的時(shí)間間隔
  24. preventDefault: true 是否阻止默認(rèn)事件
  25. preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默認(rèn)事件
  26. HWCompositing: true 是否啟用硬件加速
  27. useTransition: true 是否使用CSS3的Transition屬性
  28. useTransform: true 是否使用CSS3的Transform屬性
  29. probeType: 1 滾動(dòng)的時(shí)候會(huì)派發(fā)scroll事件,會(huì)截流。2滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā)scroll事件,不會(huì)截流。 3除了實(shí)時(shí)派發(fā)scroll事件,在swipe的情況下仍然能實(shí)時(shí)派發(fā)scroll事件

Events 事件

代碼實(shí)例:

let scroll = new BScroll(document.getElementById('wrapper'),{  probeType: 3}) scroll.on('scroll', (pos) => { console.log(pos.x + '~' + pos.y)})
  1. beforeScrollStart - 滾動(dòng)開(kāi)始之前觸發(fā)
  2. scrollStart - 滾動(dòng)開(kāi)始時(shí)觸發(fā)
  3. scroll - 滾動(dòng)時(shí)觸發(fā)
  4. scrollCancel - 取消滾動(dòng)時(shí)觸發(fā)
  5. scrollEnd - 滾動(dòng)結(jié)束時(shí)觸發(fā)
  6. touchend - 手指移開(kāi)屏幕時(shí)觸發(fā)
  7. flick - 觸發(fā)了 fastclick 時(shí)的回調(diào)函數(shù)
  8. refresh - 當(dāng) better-scroll 刷新時(shí)觸發(fā)
  9. destroy - 銷毀 better-scroll 實(shí)例時(shí)觸發(fā)

函數(shù)列表

scrollTo(x, y, time, easing):滾動(dòng)到某個(gè)位置,x,y 代表坐標(biāo),time 表示動(dòng)畫(huà)時(shí)間,easing 表示緩動(dòng)函數(shù)scroll.scrollTo(0, 500)

scrollToElement(el, time, offsetX, offsetY, easing):滾動(dòng)到某個(gè)元素,el(必填)表示 dom 元素,time 表示動(dòng)畫(huà)時(shí)間,offsetX 和 offsetY 表示坐標(biāo)偏移量,easing 表示緩動(dòng)函數(shù)

refresh():強(qiáng)制 scroll 重新計(jì)算,當(dāng) better-scroll 中的元素發(fā)生變化的時(shí)候調(diào)用此方法

getCurrentPage():snap 為 true 時(shí),獲取滾動(dòng)的當(dāng)前頁(yè),返回的對(duì)象結(jié)構(gòu)為 {x, y, pageX, pageY},其中 x,y 代表滾動(dòng)橫向和縱向的位置;pageX,pageY 表示橫向和縱向的頁(yè)面索引。用法如:getCurrentPage().pageX 

goToPage(x, y, time, easing)
snap 為 true,滾動(dòng)到對(duì)應(yīng)的頁(yè)面,x 表示橫向頁(yè)面索引,y 表示縱向頁(yè)面索引, time 表示動(dòng)畫(huà),easing 表示緩動(dòng)函數(shù)(可省略不寫(xiě))

enable()啟用 better-scroll,默認(rèn)開(kāi)啟

disable()  禁用 better-scroll

destroy() 銷毀 better-scroll,解綁事件

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 汉寿县| 德钦县| 吉木萨尔县| 朝阳县| 福贡县| 巨野县| 黎川县| 晴隆县| 浠水县| 山西省| 镇康县| 泰州市| 武定县| 信阳市| 台南县| 阿拉尔市| 湘潭县| 徐闻县| 泗水县| 嘉定区| 南投市| 泌阳县| 锡林郭勒盟| 扬中市| 泸州市| 时尚| 肥西县| 新沂市| 井冈山市| 崇阳县| 山东省| 自治县| 申扎县| 江北区| 同江市| 利川市| 江永县| 陇南市| 康平县| 方城县| 孝感市|