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

最近做乙個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中引入IScroll外掛程式做滾動

react引入渲染markdown檔案

React 引入bootstrap美化元件

在vue中如何引入element ui

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

react引入渲染markdown檔案

React 引入bootstrap美化元件

在vue中如何引入element ui

相關推薦