在React中引入IScroll外掛程式做滾動

2022-03-04 14:02:23 字數 2046 閱讀 5328

最近做乙個h5專案,資料互動量比較大,很多頁面都是從後台拿過來資料做乙個列表顯示,這自然就遇到了滾動。

import react from 'react';

import from 'react-dom';

import '../common/css/base.styl';

import '../common/css/waastyle.styl';

import '../common/css/page.styl';

var divdom = document.createelement('div');

divdom.setattribute('id', 'wrap');

document.body.addeventlistener("touchmove",function

(e) ,

false

);render(

, divdom);

這是在react的根頁面下直接禁用touchmove事件,禁止使用者touchmove,可以達到不出現網域名稱和黑色邊框的效果。

由於禁止touchmove事件,在需要列表滾動的地方,overflow:scroll;監聽不到touchmove了,滑動變得無效,怎麼解決呢?我們可以在需要滾動的地方禁止冒泡事件:

//

首先要獲取需要禁止冒泡事件的dom,由於react是構建虛擬的dom,可以這樣拿到dom:ref= };

componentdidmount () ,

false

);

} //

dom在頁面掛載完成後,禁止冒泡事件。

加上這樣的**後,就會發現,整個頁面仍然是禁止滑動,列表頁可以正常滾動,但是,當列表滾動到底的時候,使用者繼續滑動,整個頁面仍然會跟著滑動,又露出我們不想看到的部分,感覺好氣呀……

冷靜分析一下,這條路是走不通的,由於列表區域禁止了冒泡事件,那麼使用者只要在列表區域滑動,那麼你在body上做的禁止滑動就是沒有效果的!

萬般無奈下,我有搬來了我的老夥計:iscroll.js。之所以選他,因為他有乙個非常有用的方法:refresh();我只要在componentdidmount中例項化iscroll,並且在react資料更新後再次refresh就可以了。那麼開始做了。

react框架中引入我們想要的外掛程式,只要這樣做就行:

import iscroll from "moudle/iscroll/iscroll";

然後頁面掛載完成後我們進行例項化

componentdidmount() );  

},10);

}

一但react檢測到資料有更新,他就會自動重新整理頁面,那麼我們這個時候需要重新重新整理iscroll:

componentdidupdate()

**做到這裡,我們就會發現,即使禁止touchmove事件,我們依然可以使用滾動列表,問題完美解決!不過,此時客戶大手一揮,指著我們的滾動條,這個滾動條有點醜呀,能不能把它做得科技感一些……哎,數不清的星星,改不完的需求啊,不過,這個對於我們無(xia)所(chui)不(niu)能(bi)的程式猿也是可以做得。在iscroll中,它的滾動條是由兩個做了定位的div構成的,那麼

我們在例項化iscroll的時候引數中設定:

this.myiscroll = new iscroll("#dom",);

然後我們在樣式表中使用兩個類名:

componentdidmount () ;

this.iscrollinstance = new iscroll(this

.scrollcontent,options);

this.iscrollinstance.on('scrollend', function

() );

} else

); }

}});

}

做到這裡,我們利用iscroll想解決的需求都可以滿足了……

react引入渲染markdown檔案

因為需要在專案中新增更新日誌,而一般更新日誌都是markdown檔案,所以需要實現在react中引入並渲染markdown檔案。1.安裝依賴 npm install react markdown2.使用,可能會發生兩種情況,第一種是直接引入的markdown檔案不能被識別,需要通過fetch來獲取檔...

React 引入bootstrap美化元件

npm i bootstrap import react from react import reactdom from react dom 全域性引入 bootstrap 元件中都可以使用bootstrap提供的樣式表 import bootstrap dist css bootstrap.css...

在vue中如何引入element ui

element ui是餓了麼團隊為 vue提供的 ui元件 下面介紹如何在專案中引入與使用 借助 babel plugin component 我們可以只引入需要的元件,以達到減小專案體積的目的。首先 安裝 babel plugin component npm install babel plugi...