1. 程式人生 > >當better-scroll遇見了react擦出的火花

當better-scroll遇見了react擦出的火花

  關於better-scroll這個外掛前面已經介紹過兩次了 從原生js使用到結合服務端傳送資料使用都有過介紹

 

  今天給大家分享一下這款外掛在react中遇見的坑  總之我真是對這款外掛又愛又恨 每次各種bug十足後還不去拋棄他

繼續去研究他 真是恨之切,愛之深,典型的受虐狂啊  哈哈  好了廢話不多說接下來給大家展示在react遇見的小問題

 

  首先我想實現的是一個下拉重新整理的小功能,那麼我們就得需要資料 在最初始的react中實現我在state中定義了一個空陣列

然後在componentDidMount這個生命週期第一次傳送ajax請求用來給我的初始值渲染資料,然後請求過來十條資料後傳送給了

列表元件渲染上了整個頁面,接著我在這個ajax的then方法裡面初始化了一個BScroll的例項化用

pullDownRefresh: { //下拉到一百的位置才會觸發 threshold: 100, //然後鬆手後返回50的位置 stop: 30, } 設定了一波初始化條件      接著我就不知怎麼腦抽的去了componentDidUpdate這個生命週期中去監聽了pullingDown 這個事件 終於造成了一個十分尷尬的問題 就是我第二次下拉重新整理的時候ajax請求一股腦的給我觸發了多次,將所有的資料全部返回了回來,這與我每次下拉觸發一次重新整理一遍的 初衷大大不同,     經過各種掙扎後終於和例項化和pullingDown這個事件的監聽一起提出來然後放在了componentDidUpdate這個生命週期中就解決了 此時不知道大家有沒有疑問   這個函式是掛載階段的生命週期   按我們所學的知識來說掛載階段只會執行一次呀 但是為什麼這個函式裡面 的事件還會執行呢 ,此時用的知識點就是釋出訂閱了,關於釋出訂閱請看以後分享~~~       不過在這個題中還運到了另一個問題就是  如果我給元素設定一個自定義屬性然後通過偽類選擇器的attr將這個偽類選擇器展示到頁面 上去沒有成功   不知道哪位大佬能幫忙解決在react中怎麼設定自定義屬性然後通過attr展示到頁面上去,若能解答不勝感激~~~~         關於上面所說案例原始碼請訪問https://github.com/qiang-chen/reactDemo/tree/master/day3-better-scroll