iscroll使用

<template>
  <div id="wrapper" ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
import IScroll from 'iscroll/build/iscroll-probe'
export default {
  name: 'ScrollView',
  mounted () {
    this.iscroll = new IScroll(this.$refs.wrapper, {
      mouseWheel: true,
      scrollbars: false,
      probeType: 3,
      // 解決拖拽卡頓問題
      scrollX: false,
      scrollY: true,
      disablePointer: true,
      disableTouch: false,
      disableMouse: true
    })
    // 1.創(chuàng)建一個觀察者對象 web站點/后臺、程序內(nèi)嵌
    /*
    MutationObserver構造函數(shù)只要監(jiān)聽到了指定內(nèi)容發(fā)生了變化, 就會執(zhí)行傳入的回調(diào)函數(shù)
    mutationList: 發(fā)生變化的數(shù)組
    observer: 觀察者對象
    * */
    let observer = new MutationObserver((mutationList, observer) => {
      // console.log(mutationList)
      // console.log(this.iscroll.maxScrollY)
      this.iscroll.refresh()
      // console.log(this.iscroll.maxScrollY)
    })
    // 2.告訴觀察者對象我們需要觀察什么內(nèi)容
    let config = {
      childList: true, // 觀察目標子節(jié)點的變化尚卫,添加或者刪除
      subtree: true, // 默認為 false腹鹉,設置為 true 可以觀察后代節(jié)點
      attributeFilter: ['height', 'offsetHeight'] // 觀察特定屬性
    }
    // 3.告訴觀察者對象, 我們需要觀察誰, 需要觀察什么內(nèi)容
    /*
    第一個參數(shù): 告訴觀察者對象我們需要觀察誰
    第二個參數(shù): 告訴觀察者對象我們需要觀察什么內(nèi)容
    * */
    observer.observe(this.$refs.wrapper, config)
  },
  methods: {
    // 提供一個監(jiān)聽滾動距離的方法給外界使用
    scrolling (fn) {
      this.iscroll.on('scroll', function () {
        fn(this.y)
      })
    },
    refresh () {
      setTimeout(() => {
        this.iscroll.refresh()
      }, 100)
    },
    scrollTo (x, y, time) {
      this.iscroll.scrollTo(x, y, time)
    }
  }
}
</script>

<style scoped>
#wrapper{
  width: 100%;
  height: 100%;
}
</style>

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末兼蕊,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子窘游,更是在濱河造成了極大的恐慌乘综,老刑警劉巖祭埂,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件舅巷,死亡現(xiàn)場離奇詭異羔味,居然都是意外死亡,警方通過查閱死者的電腦和手機钠右,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門赋元,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人飒房,你說我怎么就攤上這事搁凸。” “怎么了情屹?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵坪仇,是天一觀的道長杂腰。 經(jīng)常有香客問我垃你,道長,這世上最難降的妖魔是什么喂很? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任惜颇,我火速辦了婚禮,結果婚禮上少辣,老公的妹妹穿的比我還像新娘凌摄。我一直安慰自己,他們只是感情好漓帅,可當我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布锨亏。 她就那樣靜靜地躺著痴怨,像睡著了一般。 火紅的嫁衣襯著肌膚如雪器予。 梳的紋絲不亂的頭發(fā)上浪藻,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天,我揣著相機與錄音乾翔,去河邊找鬼爱葵。 笑死,一個胖子當著我的面吹牛反浓,可吹牛的內(nèi)容都是我干的萌丈。 我是一名探鬼主播,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼雷则,長吁一口氣:“原來是場噩夢啊……” “哼辆雾!你這毒婦竟也來了?” 一聲冷哼從身側響起月劈,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤乾颁,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后艺栈,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體英岭,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年湿右,在試婚紗的時候發(fā)現(xiàn)自己被綠了诅妹。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡毅人,死狀恐怖吭狡,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情丈莺,我是刑警寧澤划煮,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站缔俄,受9級特大地震影響弛秋,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜俐载,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一蟹略、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧遏佣,春花似錦挖炬、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽馅巷。三九已至,卻和暖如春草姻,著一層夾襖步出監(jiān)牢的瞬間令杈,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工碴倾, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留逗噩,地道東北人。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓跌榔,卻偏偏與公主長得像异雁,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子僧须,可洞房花燭夜當晚...
    茶點故事閱讀 42,877評論 2 345